I want to make 100% width sub-menu. This should not be 100% of navbar width but 100% of width page. I'm trying to setup this but I can't manage this to work. Is there any way to style ul.sub-menu as 100% width of page?
There is many solution for 100% width but it's always 100% of navbar width not page.
This is an image showing whant I try to achive. If you click for example contact and contact have sub menu, sub menu shows on whole width page.
Thx for all kind of help.
You can use 2 static top nav bars for this, without adding them to your .col-sx-12
The top one will need margin-bottom: 0; added to it.
Make sure you change the data-target of each collapse button.
data-target=".navbar-collapse-1"
and
data-target=".navbar-collapse-2"
respectively. These classes also need added to the appropriate div, per the fiddle.
Fiddle:
Example
I was not able to get this working completely. I ended up settling for using data-toggle with a target ul. Sorry for all the junk in the markup but the primary parts of the code are the data-toggle="collapse" and data-target="#menu*" attributes. There are two submenus under "Courses & Rates" and "Clubs & Leagues" both divs are 100% width and the child uls have .container. Of course you can't have a parent container for the nav.
<!-- primary nav -->
<ul class="nav navbar-nav navbar-right primary">
<li class="dropdown">
Courses & Rates <b class="caret"></b>
<div class="collapse no-transition" id="menu1">
<ul class="container">
<li>Elmwood Golf Course</li>
<li>Prairie Green Golf Course</li>
<li>Kuehn Park Golf Course</li>
<li>Green Fees</li>
</ul>
</div>
<li class="dropdown">
Clubs & Leagues <b class="caret"></b>
<div class="collapse no-transition" id="menu2">
<ul class="container">
<li>Sioux Falls Men's Golf Club</li>
<li>Ladies Golf Leagues</li>
<li>Junior Golf</li>
<li>High School Golf</li>
<li>The First Tee</li>
<li>Rockafellow Scholarship</li>
</ul>
</div>
<li>Events</li>
<li>News</li>
<li>Pro Shop</li>
</ul><!-- end primary nav -->
EDIT: note that this requires bootstrap's dorpdown js and css
EDIT2: docs here
Related
I have the code below for my nav bar. I want the text in the "Download Freebies" item to change color when the mouse is hovered over it. I am only editing an existing template and there's some css already written for it in the style sheet (for "single-freebie" and "freebie-box"). What can I add (and where) to make the text "Download Freebies" change color to blue when the mouse is hovered over it.
PS: I've already tried the ":hover" and maybe one or two other "solutions" I found online. The color isn't changing and the border of the "Download Freebies" instead jumps upwards or sideways when hovered. I know I am doing something wrong but can't figure out what it is. I am happy to post more code if you specifically request anything you want to look at for me.
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li >Home</li>
<li>About</li>
<li>Download Freebies</li>
<li><div class="single-freebie">
Upload resources</li>
<li>
</li>
</ul><!-- / ul -->
</div><!-- /.navbar-collapse -->
You can use this or you can use JavaScript. I think both will meet your needs.
<li ><a href="index.html"
onMouseOver="this.style.color='#000'"
onMouseOut="this.style.color='#333'">Home</a></li>
<li><a href="about.html"
onMouseOver="this.style.color='#000'"
onMouseOut="this.style.color='#333'">About</a></li>
I am using Twitter Bootstrap.css.
I have a top navigation bar which will normally show a menu with hover-over popup for sub items.
But when the collapsed is set due to #media constraints, I want to show the content as nested <select> and <Option> elements.
Clicking the menu button will show content like this:
I am not sure how to perform an inverse collapse. I have tried collapse, collapse.in, etc. styles.
I want to show one content when collapsed and another if not collapsed. Both content areas need to show in the navbar area.
I would like to do pure CSS with no javascript.
The following is the HTML I want to hide when callapsed. I have not created the HTML with the select/option tags yet.
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav" ng-if="userData.isAdminUser" style="cursor: pointer;">
<li class="dropdown">
<a>Managment</a>
<ul class="dropdown-menu">
<li>Employees</li>
<li>Groups</li>
<li>Products</li>
<li>Skills</li>
<li>Levels</li>
</ul>
</li>
</ul>
</div>
My website has some serious issues when you resize it to the medium and small views. It looks great at full screen and mobile view but has some serious issues in the browser when you shrink it down to medium and below. I've used foundation but also mixed in some non-foundation code that I think is causing some issues, such as the container. I also suspect there is something wrong with the top nav bar, because that looks off at shrunk views as well. There is a lot of code to look at but i will post some snippets here as well as link to the main site so you can look through the full code.
Here is some of the top bar and also I have a container which is not part of the grid which might be throwing things off, as well as a weird header element that I coded some css for and if removed throws it off as well. Basically, my code is a bit of a mess, and I will be cleaning it up best I can once I figure out what is causing a lot of this mess up when the browser is resized. (ps. to see the rest of the code and css, please visit www.omegadesignla.com and inspect element, or ask me to paste a specific part, thanks! )
<nav class="top-bar" data-topbar>
<ul class="title-area">
<li class="name">
<span><img class="logo" src="img/primarylogo.png"><span>
</li>
<li class="toggle-topbar menu-icon">
Menu
</li>
</ul>
<section class="top-bar-section">
<ul class="right">
<li>About us</li>
<li>Contact us</li>
<li class="has-dropdown">
Services
<ul class="dropdown">
<li>Print Media</li>
<li>Web Development</li>
<li>Promotional Items</li>
<!-- <li class="active">Active link in dropdown</li> -->
</ul>
</li>
</ul>
</section>
</nav>
<div class="container">
<header>
<div class="row">
<div class="large-3 medium-3 small-6 small-centered columns"> <!-- large centered -->
<a id="topbutton" href="#" class="button large radius button">Take the tour!</a>
</div>
</header>
From debugging your site with firebug i see that the logo in the left top corner is a png with 720px width. Although you have class .logo width: 40% it makes the .title-area 720px width which breaks the layout.
try following additions to css:
.title-area {
max-width: 40%; //or whatever you need for your layout. px will work there, too
}
.title-area .logo {
width: 100%;
height: auto;
}
I'd also rewize the png to the needed size to save some kB to download.
I hope that helps.
I have a horizontal navigation, and I want the last two item to be pushed to the right side of the container.
With only one item, I could simply float the last item of the navigation. But I want to apply this to two elements - and I have the constraint that their order has to be the same in HTML and for the viewer.
I tried the following, but this broke my javascript code which relies on
$('... a').parent().next().doSomething(...)
The code
<ul class="main main-nav">
<li class="first">Projekte</li>
<li>Aktuell</li>
<div class="push-right">
<li>Über uns</li>
<li>Kurse</li>
</div>
</ul>
Is there some obvious solution I don't see?
Any other shortcut?
You shouldn't place a div inside of a ul:
<ul class="main main-nav">
<li class="first">Projekte</li>
<li>Aktuell</li>
<li class="push-right">Über uns</li>
<li class="push-right">Kurse</li>
<!-- Or Flip them to maintain order -->
<li class="push-right">Kurse</li>
<li class="push-right">Über uns</li>
</ul>
CSS:
.push-right{
float:right;
}
I'm new to Bootstrap/PHP, so please be gentle :-)
The code is as follows:
<div class = "navbar navbar-inverse navbar-fixed-bottom">
<div class = "container">
<p class = "navbar-text pull-left">Copyright 2014 by ABC</p>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
Support<b class = "caret"></b>
<ul class = "nav navbar-nav navbar-right dropdown-menu">
<li>Help</li>
<li>FAQ</li>
<li>How To</li>
</ul>
</li>
</ul>
</div>
</div>
This creates a navbar on the bottom of the page with a drop-up menu.
The navbar has an inverse colour, so the text has been set to white to maximise the contrast.
Unfortunately the result is white text on a white background when attempting to select from the menu.
My guess is that I need to override Bootstrap's CSS, but I'm not sure what to override.
And I would prefer not to screw with Bootstrap's CSS file just in case I blow everything.
Many thanks
You have overridden link color by adding an inline style style="color: #ffffff;". This is a bad practice as it’ll take precedence on all other declarations to this element (:hover, :active, …).
If you want to change Bootstrap defaults, you should better do it in a separated CSS file. In this case the style would be:
.navbar-inverse .navbar-nav>li>a {
color: white;
}
You have extra classes on your dropdown
<ul class="nav navbar-nav navbar-right dropdown-menu">
It should be
<ul class="dropdown-menu">
You can see the result here.
The above ans, by LeBen is pretty much fine. But, while working on Bootstrap, keep an eye while overriding Bootstrap CSS. You can easily play it first in Firebug then override, and place a common comment with its description so you can easily make it out. And, while overriding make sure it wont affect the other part in the project, so think before overriding it