Question of bootstrap Collapsing Navigation bar

I have reflected on the Bootstrap to W3Schools tutorials and may not know what part of the code. Here is the code:

< NAV class = "navbar, navbar-reverse" >
< div class =' container-fluid '>
< > div class ="navbar head"
< button type = 'button' class = 'toggle navigation bar' data-toggle = 'collapse' data-target = "#myNavbar" >
< span class =' icon-bar '></ span>
< span class = ' icon-bar ' > < / span >
< span class = ' icon-bar ' > < / span >
< Big >
< un class = "navbar-brand" href = « # » > WebSiteName</a>
< /div >
< > div class ='navbar-collapse collapse' id ='myNavbar'
< ul class = 'nav, navbar-nav' >
< li class="active"><a href="#">Home</a></li>
< li > < a href="#">Page 1</a></li>
< li > < a href="#">Page 2</a></li>
< li > < a href="#">Page 3</a></li>
< /ul >
< ul class = 'nav, navbar-right navigation-nav bar' >
< li > < a href =' # '><span class ='glyphicon glyphicon-user'></ span> Sign Up</a></li>
< li > < a href =' # '><span class ='glyphicon-log-in glyphicon'></ span> connection</a></li>
< /ul >
< /div >
< /div >
< /nav >

1. What are the < span class = 'bar icons' > < / span > control?

2. is there a reference to one of these classes, or was it just a name they gave him?


I tried to research the info on their site, but has not been any progress. Any help would be greatly appreciated.


Thank you

John

When you resize the mobile site size or display on a mobile device, the menu will collapse and you will see what looks like an icon with three bars piled on top, sometimes referred to as a menu Burger. This code creates the three icon bar.

Tags: Dreamweaver

Similar Questions

  • Help Web site navigation bar

    Hi all

    I'm Manager of my own Web site and there is one last thing I wanted to do, but do not for the life of me find.

    I use an inline block to create a navigation bar, and I have a float for all "items in the list. What I'm trying to understand, that's how I have list items are in line with the page/window as well as the block size. I feel like I've tried everything, so I'd like someone to prove me wrong!

    Thank you!

    Rethink the concept.  Menu can be used as it is not current state unless people are on a large screen.  My advice is to find a system of sensitive menu which starts horizontally on the great features & collapses and stacks vertically on the smaller.

    Bootstrap default navigation bar does all this without too much difficulty.

    Example: https://getbootstrap.com/examples/navbar/

    Code tutorials: Bar of Navigation of Bootstrap

    Nancy O.

  • My navigation bar collapsed onto the gallery page not working gas not star tutorial - how to make and style of a sensitive web page

    Hello

    I made the tutorial how to make and style of a sensitive web page. This is the tutorial of Star Gazer. My Gallery with the images of the planets page works well until I reduce the size of the browser and displays the "sandwich" of the navigation bar icon collapsed, when I click on this icon, nothing happens. Could someone please tell me what is the problem with my HTML or otherwise I you have filled the gallery page and it works could you please paste your code in the response. Any help is much appreciated, thank you.

    Vincent

    < title > Stargazer / < /title >
    <!-"bootstrap"->
    "< link href="css/bootstrap.css" rel="stylesheet">" "
    "" < link href= "css/styles.css" rel= "stylesheet" type= "text/css" > ".
    <! - HTML5 shim and Respond.js for IE8 take in charge of the HTML5 elements and questions from the media - >
    <!-WARNING: Respond.js does not work if you view the page via file://-->
    <!-[if lt IE 9] >
    " < script src =" https://OSS.MaxCDN.com/html5shiv/3.7.2/html5shiv.min.js "> < / script > .
    " < script src =" https://OSS.MaxCDN.com/respond/1.4.2/respond.min.js "> < / script > .
    <! [endif]-->
    < / head >
    < body >
    "< div class="container-fluid" id="wrapper">" "
    "< nav class="navbar, navbar - default">".
    "< div class="container">".
    <
    ! - Brand and toggle get grouped together for better mobile display->"< div class="navigation-head bar' > '."" < button type= "button" class= "navbar toggle collapsed" data-toggle= "collapse" data-target= "#defaultNavbar1" > < span class= "only sr" > toggle thenavigation / </span >< span class= "toolbar" ></span >< span class= "toolbar" ></span >< span class= 'toolbar' ></span > </ button > """< a class="brand navigation bar" href="index.html"> Stargazer< /a >< / div > " "<!-collect the nav links, forms, and other content to alternate->"< div class="navbar-collapse collapse" id="defaultNavbar1">" ""< ul class="navbar-nav right navbar nav">".< li > <a href="#"> On< /a > </li >< li > <a href="#"> Gallery< /a > </li >< li > " < a href="http://www.nasa.gov"> ". NASA< /a > </li >< /ul >< / div ><!-/ .navbar-collapse->< / div ><!-/ .container-fluid->< / nav >"< idarticle = 'main' > '.< h1 > Close to the Sun. < / h1 >< p > Lorem ipsum dolor sit amet, adipiscing elit computer. CRAs gravida, ligula libero sem, condimentum mauris risus vitae orci sold computer and elementum tristique, felis. Nulla justo nisl, ut ut felis, tempus dapibus purus vestibule. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos inceptos. Donec lectus vel lacinia dolor quis massa mollis nisi. Phasellus at pretium ipsum. Surpassing vestibule risus vitae. Surpassing fringilla tempus lacus, vitae elementum felis efficitur. < /p >< / item >"< div class="container">"."< div class="row">"."< div class="col-md-4">".«"< div class="thumbnail"> < img src="images/gallery/gallery-thumbnail-1.jpg" alt="Thumbnail Image 1" class="thumb"> »"< div class="caption">".< h3 > Mercury< / h3 >< p > In libero non ultricies rutrum lacus feugiat. Etiam dignissim, massa and vestibule molestie nibh nisl ante, vitae city eros nec dui aliquet magna. Aenean egestas diam, pretium nisl, ullamcorper felis vitae. Suspendisse blandit lorem turpis, non tempus imperdiet aliquet leo. < /p >< / div >< / div >< / div >"< div class="col-md-4">".«"< div class="thumbnail"> < img src="images/gallery/gallery-thumbnail-2.jpg" alt="Thumbnail Image 1" class="thumb"> »"< div class="caption">".< h3 > Mariner< / h3 >< p > In libero non ultricies rutrum lacus feugiat. Etiam dignissim, massa and vestibule molestie nibh nisl ante, vitae city eros nec dui aliquet magna. Aenean egestas diam vitae ullamcorper, pretium nisl felis. Suspendisse blandit lorem turpis, non tempus imperdiet aliquet leo. < /p >< / div >< / div >< / div >"< div class="col-md-4">".«"< div class="thumbnail"> < img src="images/gallery/gallery-thumbnail-3.jpg" alt="Thumbnail Image 1" class="thumb"> »"< div class="caption">".< h3 > Messenger< / h3 >< p > In libero non ultricies rutrum lacus feugiat. Etiam dignissim, massa and vestibule molestie nibh nisl ante, vitae city eros nec dui aliquet magna. Aenean egestas diam, pretium nisl, ullamcorper felis vitae. Suspendisse blandit lorem turpis, non tempus imperdiet aliquet leo. < /p >< / div >< / div >< / div >< / div >< / div >"< div class="container">"."< div class="row">"."< div class="col-md-4">".«"< div class="thumbnail"> < img src="images/gallery/gallery-thumbnail-4.jpg" alt="Thumbnail Image 1" class="thumb"> »"< div class="caption">".< h3 > Magnetic< / h3 >< p > In libero non ultricies rutrum lacus feugiat. Etiam dignissim, massa and vestibule molestie nibh nisl ante, vitae city eros nec dui aliquet magna. Aenean egestas diam vitae ullamcorper, pretium nisl felis. Suspendisse blandit lorem turpis, non tempus imperdiet aliquet leo. < /p >< / div >< / div >< / div >"< div class="col-md-4">".«"< div class="thumbnail"> < img src="images/gallery/gallery-thumbnail-5.jpg" alt="Thumbnail Image 1" class="thumb"> »"< div class="caption">".< h3 > Microwave< / h3 >< p > In libero non ultricies rutrum lacus feugiat. Etiam dignissim, massa and vestibule molestie nibh nisl ante, vitae city eros nec dui aliquet magna. Aenean egestas diam, pretium nisl, ullamcorper felis vitae. Suspendisse blandit lorem turpis, non tempus imperdiet aliquet leo. < /p >< / div >< / div >< / div >"< div class="col-md-4">".«"< div class="thumbnail"> < img src="images/gallery/gallery-thumbnail-6.jpg" alt="Thumbnail Image 1" class="thumb"> »"< div class="caption">".< h3 > Mapping < / h3 >< p > In libero non ultricies rutrum lacus feugiat. Etiam dignissim, massa and vestibule molestie nibh nisl ante, vitae city eros nec dui aliquet magna. Aenean egestas diam vitae ullamcorper, pretium nisl felis. Suspendisse blandit lorem turpis, non tempus imperdiet aliquet leo. < /p >< / div >< / div >< / div >< / div >< / div >< footer >& copy; 2015 stargazer< / footer >< / div ><! - jQuery (necessary to Bootstrap JavaScript plugins) - >" < script src="js/jquery-1.11.2.min.js"> ". < /script ><! - Include compiled all the plugins (see below), or individual files as needed-->" < script src="js/bootstrap.js"> ". < /script >< / body >< / html >

    The cause of the problem is not attached jQuery library.

    Make sure that jquery - 1.11.2.min.js is located in the subdirectory js as in

  • "Bootstrap" in display Mobile navigation bar

    Hi all

    I use jQuery to load my browsing in all my pages. It works great except for one thing... when I set my browser to see the mobile display, I select menu toggle to let fall the menu down which works fine but when I try pressing again for the menu back up... it does not work. No idea why? I tried the menu, which is located in my navigation.html file and it works perfectly, it's only when I place it in another page where the toggle function stops working.

    Any help would be appreciated.

    Thank you

    Ian.

    CODE


    <! DOCTYPE html >

    < html >

    < head >

    < title > < /title > Bootstrap example

    < meta charset = "utf-8" >

    < meta name = "viewport" content = "width = device-width, original scale = 1" >

    " < link rel ="stylesheet"href =" http://MaxCDN.bootstrapcdn.com/bootstrap/3.3.5/CSS/bootstrap.min.CSS ">

    < link href = "css/main.css' rel ="stylesheet"type =" text/css">"

    " < script src =" https://AJAX.googleapis.com/AJAX/libs/jQuery/1.11.3/jQuery.min.js "> < / script > .

    " < script src =" http://MaxCDN.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js "> < / script > .

    < script >

    {$(document) .ready (function ()}

    $('.navigation').load ('navigation.html');

    });

    < /script >

    < style >

    {body

    position: relative;

    }

    {#home}

    color: #fff;

    background-color: #D9DDDF;

    }

    {#mobile}

    color: #fff;

    background-color: #ECEFF1;

    }

    {#multimedia}

    color: #fff;

    background-color: #E5E3DF;

    }

    #sirius {padding-top: 50px; height: 500px; color: #fff; background-color: #00bcd4 ;}}

    #section42 {padding-top: 50px; height: 500px; color: #fff; background-color: #009688 ;}}

    {.section1}

    }

    < / style >

    < / head >

    < body spy-data = "scroll" data-target = ".navbar' data-offset ="145"> <!-do submenu strong btn->

    < div class = "navigation" > < / div >

    < / body >

    < / html >

    navigation.html CODE


    <! DOCTYPE html >

    < html >

    < head >

    < title > < /title > Bootstrap example

    < meta charset = "utf-8" >

    < meta name = "viewport" content = "width = device-width, original scale = 1" >

    " < link rel ="stylesheet"href =" http://MaxCDN.bootstrapcdn.com/bootstrap/3.3.5/CSS/bootstrap.min.CSS ">

    < link href = "css/main.css' rel ="stylesheet"type =" text/css">"

    " < script src =" https://AJAX.googleapis.com/AJAX/libs/jQuery/1.11.3/jQuery.min.js "> < / script > .

    " < script src =" http://MaxCDN.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js "> < / script > .

    < script >

    {$(function()}

    $(' a [href * = #]: {not([href=#])'}) ravishing (function ()})

    If (location.pathname.replace (/ ^ \ / /, ") == this.pathname.replace(/^\//,") & & location.hostname == this.hostname) {}

    var target = $(this.hash);

    target = target.length? target: $("[name =' + this.hash.slice (1) +'] '");

    If {(target.length)

    $('html,body').animate ({}

    scrollTop: target.offset () .top-140

    (}, 1000);

    Returns false;

    }

    }

    });

    });

    < /script >

    < / head >

    < body >

    < nav class = "navbar, navbar-default navbar-reverse navbar-fixed-top" >

    < div class = "container" >

    <!-brand and toggle get grouped together for better mobile display->

    < div class = "bar navigation-header" >

    "< button type ="button"class ="toggle navigation bar has collapsed"data-toggle ="collapse"data-target="#bs-example-navbar-collapse-1 "aria-expanded ="false">

    < span class = "sr only" > toggle navigation </span >

    < span class = 'bar icons' > < / span >

    < span class = 'bar icons' > < / span >

    < span class = 'bar icons' > < / span >

    < / button >

    "< div > < a href =" index.html"" > < img src="img/all_pages/header/ec_logo.png" alt = "" width = "137" height = "56" class = "img-reagent" / > < /a > < / div >

    < / div >

    <!-collect the nav links, forms, and other content to alternate->

    < div class = "navbar-collapse collapse" id = "bs-example-navbar-collapse-1" >

    < ul class = "navbar-nav nav" >

    < class li = "active" > < a href = "index.html" > < span class = "glyphicon glyphicon-home" aria-hidden = "true" > < / span > < span class = 'sr-only' > (ongoing) </span > < /a > < /li >

    < li > < a href = "divisions.html" > Divisions < /a > < /li > ""

    < li > < a href = "brands.html" > brands < /a > < /li > ""

    < class = "dropdown" li >

    < a href = "divisions.html" class = "list drop-down-turn" data-toggle = "dropdown" role = "button" aria-haspopup = "true" aria-expanded = "false" > About Us < span class = "circumflex accent" > < / span > < /a > "

    < ul class = menu "dropdown" >

    < li > < a href = "#" > topic 1 < /a > < /li >

    < li > < a href = "#" > About 2 < /a > < /li >

    < li > < a href = "#" > News & comments < /a > < /li >

    < /ul >

    < /li >

    < li > < a href = "brands.html" > Famous < /a > < /li > ""

    < /ul >

    < ul class = "navbar-nav, navbar-right nav" >

    < class = "dropdown" li >

    < a href = "#" class = "menu drop-down-turn" data-toggle = "dropdown" role = "button" aria-haspopup = "true" aria-expanded = "false" > contact us < span class = "circumflex accent" > < / span > < /a >

    < ul class = menu "dropdown" >

    < li > < a href = "#" > Support < /a > < /li >

    < li > < a href = "#" > where to buy < /a > < /li >

    < li > < a href = "#" > contact us < /a > < /li >

    < /ul >

    < /li >

    < /ul >

    < / div > <!-/ .navbar-collapse->

    < / div > <!-/ .container-fluid->

    < / nav >

    < / body >

    < / html >

    I thought about her question. I had the following both my navigation.html & all additional pages.

    Once I removed the script above since the navigation.html page and was only on the other pages, it worked.

  • CSS - do not know what to change to begin first of all for the smallest device (border in the navigation bar collapsed)

    I am starting with the smallest device (iPhone, 320 pixels wide) and have implemented the skeleton page. I added a tag to the class to change the background of the original black to Tan, but cannot find a way to cross the border in the white navigation bar icon. I thought that my class label would substitute, but does not appear. Also, is there a setting that I should look for in the bootstrap.css (read-only) which can be adjusted to display the navigation elements rather than collapsed in about 320-768 pixels button icon? Any help would be appreciated.

    John

    <! DOCTYPE html >

    < html lang = "en" >

    < head >

    < meta charset = "UTF-8" >

    < meta http-equiv = "X-UA-Compatible" content = "IE = edge" >

    < meta name = "viewport" content = "width = device-width, original scale = 1" >

    < title > Untitled Document < /title >

    <!-"bootstrap"->

    < link href = "css/bootstrap.css" rel = "stylesheet" > "

    < link href = "css/phone.css" rel = "stylesheet" type = "text/css" > "

    <! - HTML5 shim and Respond.js for IE8 take in charge of the HTML5 elements and questions from the media - >

    <!-WARNING: Respond.js does not work if you view the page via file://-->

    <!-[if lt IE 9] >

    " < script src =" https://OSS.MaxCDN.com/html5shiv/3.7.2/html5shiv.min.js "> < / script > .

    " < script src =" https://OSS.MaxCDN.com/respond/1.4.2/respond.min.js "> < / script > .

    <! [endif]-->

    < / head >

    < body >

    < div class = "container-fluid" >

    <! - start the header image - >

    < div class = "row" >

    < div class = "col-xs-12" style = "" background-color: #ABF0A7; "> < / div >"

    < / div >

    <! - end header image - >

    <! - start navigation - >

    < nav class = "navbar, navbar-reverse rennavbkgrd" > ""

    < div class = "container-fluid" >

    < div class = "bar navigation-header" >

    < button type = "button" class = 'bar of navigation-toggle' toggle data = 'collapse' data-target = "#myNavbar" >

    < span class = 'bar icons' > < / span >

    < span class = 'bar icons' > < / span >

    < span class = 'bar icons' > < / span >

    < / button >

    < / div >

    < div class = "navbar-collapse collapse" id = "myNavbar" >

    < ul class = "navbar-nav nav" >

    < class li = "active" > < a href = "#" > about us < /a > < /li >

    < li > < a href = "#" > < /a > < /li > team members

    < li > < a href = "#" > Subscriber packages < /a > < /li >

    < li > < a href = "#" > insurers < /a > < /li >

    < li > < a href = "#" > Photos < /a > < /li >

    < li > < a href = "#" > contact us < /a > < /li >

    < /ul >

    < / div >

    < / div >

    < / nav >

    <!--end of navigation-->

    < div class = "container-fluid" >

    < h1 > Just a few of us < / h1 > <! - subtitle of the page - >

    <! - start the main text area - >

    < div class = "row" >

    < div class = "col-xs-12" style = "" background-color: Lavender; "> < p > welcome to the Renegades." duis dapibus molestie nisi egestas Magna non semper. ID justo nam posuere duis laoreet auctor fames. Volutpat placerat ut suspendisse imperdiet porttitor felis dui donec pulvinar sollicitudin sollicitudin so tempor. Massa feugiat quam viverra nunc enim libero torquent torquent mus nec lectus is turpis.

    < /p > < / div >

    < div class = "col-xs-6" style = "" background-color: #F39393; "> < p team photo > < /p > < / div >"

    < div class = "col-xs-6" style = "" background-color: #B3EBB7; "> < p >"

    Penatibus ante, MPCs fames morbi egestas duis dapibus molestie nisi Magna non semper lorem. ID justo nam posuere duis laoreet auctor fames. Volutpat placerat ut suspendisse imperdiet porttitor felis dui donec pulvinar sollicitudin sollicitudin so tempor. Massa feugiat quam viverra nunc enim libero torquent torquent mus nec lectus is turpis.

    < /p > < / div >

    < div class = "col-xs-12" style = "" background-color: lavenderblush; "> < p > third text < /p > < / div >"

    < / div >

    < / div >

    <! - end of main text area - >

    < / div >

    <! - start the footer - >

    < style footer = "" background-color: #F2DA3E; "> < p > copyright & copy;" Renegades 1999 team kitchen. All rights reserved. < /p > < / footer >

    <! - end of footer - >

    <! - jQuery (necessary to Bootstrap JavaScript plugins) - >

    "< script src="js/jquery-1.11.2.min.js "> < / script >

    <! - include all the plugins compiled (see below), or include individual files to the need - >

    < script src = "js/bootstrap.js" > < / script >

    < / body >

    < / html >

    Use navbar-default (light) instead of - reverse (dark).

    And you can target the Bootstrap selectors in your custom CSS code.  No additional required courses.

    .NavBar.NavBar - default {background-color: #D2B48C ;}}

    Nancy O.

  • I have problems with the sensitive function by using bootstrap? My navigation bar is elegantly expansion and contraction, but my image of lead left at some point and the navigation bar extends beyond? Is there an optimal size should I use?

    And here's the code? Am new to this so we have recently upgraded to this version of the Creative Suite? Really like the design and functionality, but can't seem to get my header image at the top to fill the screens? It's using the latest Mac version.

    <! DOCTYPE html >

    < html lang = "en" >

    < head >

    < meta charset = "UTF-8" >

    < meta http-equiv = "X-UA-Compatible" content = "IE = edge" >

    < meta name = "viewport" content = "width = device-width, original scale = 1" >

    < title > wastewater education 501 c 3 < /title >

    <!-"bootstrap"->

    < link href = "css/bootstrap.css" rel = "stylesheet" > "

    < style type = "text/css" >

    .the {}

    Width: 100%;

    position: relative;

    }

    . Right {}

    }

    < / style >

    <! - HTML5 shim and Respond.js for IE8 take in charge of the HTML5 elements and questions from the media - >

    <!-WARNING: Respond.js does not work if you view the page via file://-->

    <!-[if lt IE 9] >

    " < script src =" https://OSS.MaxCDN.com/html5shiv/3.7.2/html5shiv.min.js "> < / script > .

    " < script src =" https://OSS.MaxCDN.com/respond/1.4.2/respond.min.js "> < / script > .

    <! [endif]-->

    < / head >

    < body >

    < div class = "container-fluid" >

    "< img src="images/2015/2015header.jpg "class ="img-reagent"alt =" WasteWaterEducation.org logo ">

    < nav class = "navbar, navbar-reverse" >

    <!-brand and toggle get grouped together for better mobile display->

    < div class = "bar navigation-header" >

    < button type = "button" class = "toggle navigation bar has collapsed" data-toggle = 'collapse' data-target = "#inverseNavbar1" > < span class = 'sr-only' > toggle navigation </span > < span class = 'bar icons' > < / span > < span class = 'bar icons' > < / span > < span class = 'bar icons' > < / span > < / button >

    < a class = 'bar of navigation-brand' href = "index.html" > home < /a > < / div >

    <!-collect the nav links, forms, and other content to alternate->

    < div class = "navbar-collapse collapse" id = "inverseNavbar1" >

    < ul class = "navbar-nav nav" >

    < class li = "active" > < a href = "whatsnew.html" > What's New! ' " < span class = "sr only" > (ongoing) </span > < /a > < /li >

    < class li = "active" > < a href = "boardlist.html" > about us < span class = "sr only" > (ongoing) </span > < /a > < /li > "

    < class li = "active" > < a href = "search.html" > this Site Search < span class = 'sr-only' > (ongoing) </span > < /a > < /li >

    < /ul >

    < ul class = "navbar-nav, navbar-right nav" >

    < li > < a href = "newsletter.html" > subscribe to updates < /a > < /li > "

    < /ul >

    < / div >

    <!-/ .navbar-collapse->

    < / div >

    <!-/ .container-fluid->

    < / nav >

    Because the image is 1000 x 364, it will extend not to a larger size unless you give the instruction to do so.

    The best way is to assign the image to a width of 100% and make sure the extra size has not negatively affected the quality of the image.

  • Drop-down menu does not when the navigation bar collapses in rocker

    Hi all

    I use 3 "bootstrap" on the site below and I have some questions when the navigation bar collapses in rocking, as it seems to stop the drop down menus to work. When you tap or click the drop-down menus, the menu closes just, once again.

    Can someone tell me please on this?

    http://www.clockdoctors.co.UK/test/index.html

    I apologize to this topic. I didn't see that earlier post, I obviously had a blond moment.

    OK, so I think that I fixed it!

    I first tried to remove the script ' ' to see what would happen. Which translates to the stop of the page class 'scrolling' to work, but then allows the drop-down menu to work as it should, as you say.

    I then put this script, but removed this piece of code in the file "agency.js".

    Close the sensitive Menu on the Menu, click on item

    $('.navbar-effondrement_ul_li_a').click (function () {}

    $('.navbar-toggle:visible').click ();

    });

    and now it works fine!

  • space below content in the navigation bar "bootstrap".

    How to get rid of this 7 pixels or so below the video button in the navigation bar top-fix bootstrap

    v.jpg

    I tried so many parts of the css to close this space and, after the announcement of this question, I put it on the html page...

    and it was all that it took

    always be curious to know if this height is specified in css

  • Navigation bar component "bootstrap" has no classes

    Hello, I was one of the tutorials (construction of a sensitive site in Dreamweaver, which is very good), and when the component "bootstrap" was added, he had two classes, which makes sensitive.Screen Shot 2016-06-22 at 01.10.02.png

    However, when I do the same, my navigation bar appears without classes.

    Screen Shot 2016-06-22 at 01.38.14.png

    question 1: is this a setting somewhere?

    question 2: if not, then how to solve, because now I don't believe adding these components, because the classes could not fail also.

    Thank you!

    PS I use Dreamweaver CC 2015 on a MAC

    1234wr wrote:

    Hello, I was one of the tutorials (construction of a sensitive site in Dreamweaver, which is very good), and when the component "bootstrap" was added, he had two classes, which makes sensitive.

    However, when I do the same, my navigation bar appears without classes.

    question 1: is this a setting somewhere?

    question 2: if not, then how to solve, because now I don't believe adding these components, because the classes could not fail also.

    Thank you!

    PS I use Dreamweaver CC 2015 on a MAC

    Its a well known bug when DW inserts the default navigation bar - click the 'more' and you should be able to type it in yourself.

  • Navigation bar to collapse, the pasted image cursor width.

    Slider (carousel) image on my site is wide and I can't enlarge the width? The height on the other hand works, but not the width. Also, it seems that the navigation bar on my site 'collapse' in the three buttons aligned a little late. Meaning that you check the width of the smallest Web page it narrows right down.

    My site: file:///C:/Users/alex/Desktop/rootforsite/index.html

    Thanks for the help.

    If you change the width of the container, then the slider will adjust. Make sure that the sum of the two columns add to 12 as in

    "http://rootforsite.azurewebsites.net/img/pic.jpg" class = 'img-responsive center-block' / > '.

    Bootstrap 3 being mobile first, the navigation bar is reduced by default and expands when it reaches a certain minimum size. 3A bootstrap site makes a 'hint' as to what to do: http://getbootstrap.com/components/#navbar.

  • Change the color of 1 link of the Bootstrap navigation bar

    Hello

    I am eager to pass the roll of color of a link in the navigation bar of bootraps.

    I tried a class on this subject... no luck... I can change all the nav bar color... but I just want a roll of color of the item...

    All thoughts

    PAL

    Place the following in your custom stylesheet (do not touch the stylesheet (s)) original of Bootstrap

    .NavBar - default .navbar-nav > li > a: hover, .navbar - default .navbar-nav > li > a: focus {}

    background-color: #FFFF00;

    color: #FFC0CB;

    }

    This assumes that you have deployed the default navigation bar. If you use a different class, also adjust the colors to suit.

  • Drop-down menu does not when the navigation bar collapses for mobile devices

    My menu drop-down does not work correctly when the navigation bar collapses on mobile devices. The menu, but it's completely to the left, not right where I like it and hidden under a picture so that none of the links are accessible. The site is http://www.medicinedancecounseling.com.

    Index-Z = stacking order.  So even if you make menu items at the top, they mask your portrait in a most flattering way.

    Nancy O.

  • navigation bar question elementary

    Hello! If I create a Web site in DW, what the navigation bar...? If I got 30 pages or more for example... what should I do to return to the navigation menu bar!  What is the best way to reproduce the navigation menu on every page of my Web site? Can u redirect me to some good tutorials or give me some instructions for this elementary question! Thks!

    Server-side includes work just fine for info repeated on each page:

    If your server has PHP: http://www.stevedawson.com/tutorials/php-includes.php

    If the server has ISS: How to include HTML in many Documents using SSI

    Or, if you do not want to go down the road of include and your site isn't supposed to be bigger than those 30 pages, look in templates Dreamweaver here:

    https://helpx.Adobe.com/Dreamweaver/topics.html

  • CSS IE problem and navigation bar question

    Hello

    I have 2 questions:

    Is there a way to make all the elements of a horizontal navigation bar the same size, no matter the size of the word? I think I can use a background image, but perhaps someoneknows otherwise...

    and the problem with IE is that im setting the style of bottom border of a thing as dotted and thin but looks like "BOLD" or something on IE and normal in firefox, anyone knows how to fix this?

    Thank you

    Yes - you are missing the float: left... 8)

    --
    Murray - ICQ 71997575
    Adobe Community Expert
    (If you * MUST * write me, don't don't LAUGH when you do!)
    ==================
    http://www.dreamweavermx-templates.com - template Triage!
    http://www.projectseven.com/go - DW FAQs, tutorials & resources
    http://www.dwfaq.com - DW FAQs, tutorials & resources
    http://www.macromedia.com/support/search/ - Macromedia (MM) Technotes
    ==================

    "mfv84" wrote in message
    News:ee1vtp$EUD$1@forums. Macromedia.com...
    > I solved the problem of IE by setting the width of the border to "1px" instead of
    > 'thin' and I tried the "display: block;" thing, but he ordered the
    > navigation bar vertically! Maybe I'm missing something...
    >
    >

  • I cannot "bootstrap" navigation bar to work properly on ipad 2

    Hello

    I have developed a few sites recently that works well on Windows PC and laptop, laptop Apple and Android smartphone.  They do not properly work on an Ipad 2 however. The site will work if the Ipad is held in portrait mode and will not work in the landscape.  The other Web site will not work in both modes.

    I'm sure there is a simple solution for this, but I struggled to find it.  Any help will be greatly appreciated

    Roger

    Thanks a lot for the answers (which none helped also).

    I solved this problem I think.  It's history...

    A couple of days, my wife has complained that its iPad 2 (that I used to test my sites) has been very slow.  After some quick research I discovered that apple keeps everything that has been used in the past, to memory, just in case there again.  I emptied all the nonsense of the memory of the iPad, and the navigation bar now works properly.

    To back up my idea, another customer could not get the link "maito" on its Internet site working on the iPad 2, even if it was working fine on my laptop and my wife's iPad.  I just deleted the shit of his iPad, and now "mailto" link works.

    I hope that this answer is aid

Maybe you are looking for

  • want to learn about my adapter linksys AE6000 wireless

    just bought. and the implementation has been child's play! iam already see some improved effects when iam on some websites, websites that gave me the sentence, etc. but in truth, slow page loading is the initial MRI of time using this feature. the qu

  • Botting SAN

    Hello! I have some doubts about an implememtation. The environment consists of a UCS 5100 chassis, Server Blade 4 B200M2 with M81KR and two fabric 6120XP cards. The fabric switch are connected to a switch Brocade fiber 200 c and 5000. Storage is 3160

  • Descriptions of fields UserTable.txt and UserVariables.txt

    Hello I would like to get descriptions of fields UserTable.txt and UserVariables.txt . These two files are in the package.cab from an ACS SE 1113 running V4.2. These files, which use a CSV format, do not include a header with the descriptions of the

  • remove web pages from the Launcher

    is there a way to delete the web pages that you placed in the launched? for the life of me I can't figure out out to remove these from my pitcher! Thanks in advance.

  • APEX_MAIL. ADD_ATTACHMENT does not

    I use APEX_MAIL to send emails and I use ADD_ATTACHMENT to attach files stored by the browser of files as blobs in the tables. Sends the email with the text, but there is no attachment in the e-mail. Any ideas as to why? I have read several other for