Navigation bar collapse

I started to make my Web site with DW tutorial and now I stuck on a site navigation. Why it is not expanding and collapsing when I click on the navigation of parent to see the sub navigation?  I want to do only with css without adding any javascript. I want it to look like this site navigation http://explorecalifornia.org/tours.htm

Here's what I did on my site:

< div id = 'mainNav' >

< ul id = "baseNav" >

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

< ul class = "subNav" >

< li > < a href = "SubLink1.html" title = "SubLink1" > SubLink1 < /a > < /li > "

< li > < a href = "SubLink2.html" title = "SubLink2" > SubLink2 < /a > < /li > "

< li > < a href = "SubLInk3" title = "SubLInk3" > SubLink3 < /a > < /li >

< /li > < /ul >

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

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

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

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

< /ul >

< / div >

and here's the css:

{#mainNav}

background-color: #FFF;

height: 600px;

Width: 200px;

float: left;

top of the margin: 100px;

}

/ * Homepage navigation * /.

UL #homeNav {}

float: left;

list-style: none;

margin: 0;

padding: 0;

margin-bottom: 50px;

Clear: left;

border-top: 1px solid #CCC;

}

UL li {} #homeNav

margin: 0;

padding: 0;

Background: #FFF;

color: #006;

border-bottom: 1px solid #E5E5E5;

}

#homeNav li UL a {}

display: block;

Width: 200px;

Padding: 15px 0px 6px 0px;

text-indent: 2em;

text-decoration: none;

}

UL #homeNav li a: hover {}

color: #006;

text-decoration: underline;

}

/ * navigation database * /.

UL #baseNav {}

float: left;

list-style: none;

margin: 0;

padding: 0;

margin-bottom: 50px;

Clear: left;

border-top: 1px solid #CCC;

}

UL li {} #baseNav

margin: 0;

padding: 0;

border-bottom: 1px solid #E5E5E5;

}

#baseNav li UL a {}

display: block;

Width: 200px;

height: 40px;

Padding: 15px 0px 0px 0px;

text-indent: 2em;

text-decoration: none;

}

UL li ul li a.current:hover {} #baseNav, a. #baseNav

border: none;

cursor: default;

}

UL #baseNav li a: hover {}

border: none;

color: #006;

text-decoration: underline;

}

/ * sub navigation * /.

UL #baseNav ul.subNav {}

list-style: none;

margin: 0;

padding: 0;

margin-bottom: 0px;

}

UL li {} ul.subNav #baseNav

margin: 0 5px 0 50px;

}

UL #baseNav ul.subNav li a: link, ul #baseNav ul.subNav li a: visited {}

display: block;

Width: auto;

height: auto;

text-indent: 0;

padding: 5px 0;

color: #003;

}

UL #baseNav ul.subNav li a: hover {}

color: #006;

}

UL #baseNav ul.subNav li a.the {}

color: #666;

border-bottom: 1px solid #e5e5e5;

}

I'll be very grateful if you could help me!

Thank you very much, I took off. What about css, is it correct? It is still not collapse.

Tags: Dreamweaver

Similar Questions

  • 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.

  • 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!

  • 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

  • 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.

  • my top-navigation bar collapses in the size of the phone and open falling down in dreamweaverCC primer, but the square with lines only opens a menu drop-down in the browser. Can you help me?

    Anyone else have a problem with the navbar toggle expanding online? It works inside Dreamweaver, but not in a browser.

    There should be a js file in the root directory of your site.

    yoursite.org/js

    I also checked in the pages of a js file directory.  Nothing is.

    Nancy O.

  • 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.

  • 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.

  • 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.

  • Start the navigation bar positioning

    Hi all.

    How can I get my navigation bar to be in the Middle od the page up, currently its top left and I can't move it.

    Here is my code.

    <!--> navigation bar

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

    < div class = "container" >

    < div class = "bar navigation-header" >

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

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

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

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

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

    < / button >

    < a href = "" class = "navbar-brand" > < font color = "white" > Inspection x-ray Euroteck < / police > < /a >. "

    < a href = "" class = "navbar-brand" > < font color = "red" > Tel: 01827 312455 < / font > < /a >. "

    < a href = "" class = "navbar-brand" > < font color = "white" > Euroteck Systems site < / font > < /a > >»

    " < a href =" http://www.euroteck.co.UK/ "class =" bar of navigation-brand "> < font color ="red"> www.euroteck.co.uk < activated > < /a > .

    Hope you can help.

    Bootstrap is a first mobile framework.  You can't Center menus because that him will crumble on small devices.

    As a compromise, try this.  Marks on the items on the left and menu on the right.

    Nancy O.

  • Button in the navigation bar for mobile view is empty

    For mobile display nav bar button contains no content. Target data may be wrong... it is automatically generated so I think that it is a component "bootstrap". I don't have a clear idea as to how this key captures the nav info.

    I made one of these before and Dreamweaver generated auto button with all nav links

    Ok. Here's the code.

    < head >

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

    < / head >

    < body >

    < nav class = "navigation bar default navbar, navbar-reverse" >

    < div class = "container-fluid" >

    <!-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" > < span class = "sr only" > toggle navigation </span > < span class = 'bar icons' > < / span > < span class = 'bar icons' > < / span > < span class = 'bar icons' > < / span > < / button >

    < has class = "brand navigation bar" href = "#" > welcome to the store online Selva Studios < /a > < / div >

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

    < div class = "navbar-collapse collapse" >

    < ul class = "navbar-nav nav" >

    < li > < a href = "#" > about the artist < /a > < /li >

    < li > < a href = "#" > South flowers < /a > < /li >

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

    < li > < a href = "#" > Original Art < /a > < /li >

    < li > < a href = "#" > sea & shells < /a > < /li >

    < li > < a href = "#" > coastal birds < /a > < /li >

    < /ul >

    < / div >

    <!-/ .navbar-collapse->

    < / div >

    <!-/ .container-fluid->

    < / nav >

    <!-/ .navbar-collapse->

    < / div >

    <!-/ .container-fluid->

    < / div >

    < / div >

    <!-/ .container-fluid -.

    navigation-default bar is dark text on a light background.

    reverse navigation bar is a light text on dark background.

    Choose one or the other.

    Your ID target data does not match anything.

    Try this:

    Nancy O.

  • "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.

  • Display Mobile navigation bar

    Hi all

    I noticed when I discovered my work in Mobile display and I select the symbol menu, the menu down and pushes the content below it down as well. But when I applied "navbar-fixed-top" and he fought again in Mobile display, menu runs down but covers the below content instead of push down. How can I change that. See code below.

    <! DOCTYPE html >

    < html lang = "" >

    < head >

    < meta charset = "UTF-8" >

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

    < name meta = "description" content = "" >

    < name meta = "author" content = "" >

    < title > Show Dropdown Hover & the caret upward < /title >

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

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

    < style >

    {.caret-up

    Width: 0;

    height: 0;

    border-left: 4px solid rgba (0, 0, 0, 0);

    border-right: 4px solid rgba (0, 0, 0, 0);

    border-bottom: 4px solid;

    display: inline-block;

    left margin: 2px;

    vertical-align: middle;

    }

    {#black}

    background-color: #000000;

    height: 500px;

    }

    < / style >

    <!-[if IE] >

    " < script src =" https://cdnjs.cloudflare.com/AJAX/libs/html5shiv/3.7.3/html5shiv.min.js "> < / script > .

    " < script src =" https://cdnjs.cloudflare.com/AJAX/libs/respond.js/1.4.2/respond.min.js "> < / script > .

    <! [endif]-->

    < / head >

    < body >

    < div class = "container" >

    < div class = "row" >

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

    < div class = "bar navigation-header" >

    < button type = "button" class = 'bar of navigation-toggle' data-toggle = "collapse" data-target="#bs-example-navbar-collapse-1" >

    < 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 = "brand navigation bar" href = "#" > brand < /a >

    < / div >

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

    < ul class = "navbar-nav nav" >

    < class li = "active" > < a href = "#" > link < /a > < /li >

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

    < class = "dropdown" li >

    < a href = "#" class = "menu drop-down-turn" data-toggle = "dropdown" > drop < class b = "circumflex accent" > < / b > < / has >

    < ul class = menu "dropdown" >

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

    < li > < a href = "#" > another action < /a > < /li >

    < li > < a href = "#" > else here < /a > < /li >

    < class li = "divisor" > < /li >

    < li > < a href = "#" > link separate < /a > < /li >

    < class li = "divisor" > < /li >

    < li > < a href = "#" > a more separate link < /a > < /li >

    < /ul >

    < /li >

    < /ul >

    < class form = role "navbar-shape left navigation bar" = "search" >

    < div class = "form-group" >

    < input type = "text" class = placeholder 'form control' = "Search" >

    < / div >

    < button type = 'submit' class = "btn, btn-default" > Submit < / button >

    < / make >

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

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

    < class = "dropdown" li >

    < a href = "#" class = "menu drop-down-turn" data-toggle = "dropdown" > drop < class b = "circumflex accent" > < / b > < / has >

    < ul class = menu "dropdown" >

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

    < li > < a href = "#" > another action < /a > < /li >

    < li > < a href = "#" > else here < /a > < /li >

    < class li = "divisor" > < /li >

    < li > < a href = "#" > link separate < /a > < /li >

    < /ul >

    < /li >

    < /ul >

    < / div >

    < / nav >

    < / div >

    < / div >

    < div >

    < div class = "row" id = "black" > color < / div >

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

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

    < script >

    {$(function()}

    () $(".dropdown").hover

    function() {}

    $('.dropdown-menu',_this).stop (true, true) .fadeIn ("fast");

    $(this) .toggleClass ('open');

    $('b',_this).toggleClass ("caret caret-up");

    },

    function() {}

    $('.dropdown-menu',_this).stop (true, true) .fadeOut ("fast");

    $(this) .toggleClass ('open');

    $('b',_this).toggleClass ("caret caret-up");

    });

    });

    < /script >

    < / body >

    < / html >

    It works for me with this set - up.

  • 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.

  • Navigation bar is empty. Customize Firefox page is empty. Any ideas?

    I love Firefox - used it for years.

    Since yesterday, my navigation bar is empty - that is to say, there is no evidence that even if it is enabled.

    And when I go to 'Customize firefox' to restore the default settings, it is just a blank page.

    I uninstalled Firefox and did a new install and that didn't fix it.

    I drove back to v38 and it has not fixed either.

    8.1 win with all the updates in place, 64-bit, Firefox v39.0.

    Any ideas that I prefer Firefox to Chrome, but it is currently unusable?

    (Editor's Note sure if my image upload work - looks like in the web page is having issues because it is a very small file.)

    Try Firefox refresh

    If this help then try to reinstall, but this time clean reinstall that is to delete the details of files (NOT the profile with settings) of the Firefox program as follows:
    (Please back too tell how and what you've tried)

    Some Firefox problems can be solved by performing a clean reinstall. This means that you delete your Firefox program files, and then reinstall Firefox. This process does not delete your Firefox profile (such as bookmarks and passwords) data, since this information is stored in a different location.

    To do a clean reinstall of Firefox, follow these steps: Note: you can print these steps or consult them in another browser.

    1. Download the latest version of Firefox from mozilla.org office (or choose the download for your operating system and language on this page) and save the file to install it on your computer.
    2. Once the download is complete, close all Firefox Windows (or open the Firefox menu

      Click the close button

      ).

    3. Remove the Firefox installation folder, which is located in one of these locations, by default:
      • Windows:

        • C:\Program Files\Mozilla Firefox
        • C:\Program Files (x 86) \Mozilla Firefox
      • Mac: Delete Firefox in the Applications folder.
      • Linux: If you have installed Firefox with the distribution-based package manager, you must use the same way to uninstall: see Install Firefox on Linux. If you have downloaded and installed the binary package from the Firefox download page, simply remove the folder firefox in your home directory.
    4. Now, go ahead and reinstall Firefox:
      1. Double-click on the downloaded Setup file and go through the steps in the installation wizard.
      2. Once the wizard is completed, click to open Firefox directly after clicking the Finish button.

    More information on the resettlement of Firefox can be found here.

    WARNING: Do not use a program to uninstall third party as part of that process. This could permanently delete your Firefox profile data, including but not limited to, extensions, cache, cookies, bookmarks, personal settings and passwords saved. They can be retrieved easily unless they have been backed up on an external device! See back up and restore the information contained in the profiles of Firefox.

Maybe you are looking for