I used a responsive navigation bar from Bootstrap:
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<!-- .btn-navbar is used as the toggle for collapsed navbar content -->
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<!-- Everything you want hidden at 940px or less, place within here -->
<div class="nav-collapse collapse">
<!-- .nav, .navbar-search, .navbar-form, etc -->
<ul class="nav">
<li>Item 1</li>
<li><a class="dropdown-toggle" data-toggle="dropdown" href="#">Item 2</a>
<ul class="dropdown-menu">
<li>Sub Item 1</li>
<li>Sub Item 2</li>
</ul>
</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
</div>
</div>
</div>
</div>
but when I add this wordpress php function :
<?php wp_nav_menu(array('menu' => 'Main Menu')); ?>
instead of all the "li" tags to pull the nav items dynamically, the style of the navigation bar disappears.
It works to put this php in a simple "nav" tag with "li" tags and stuff but in this html it doesn't...
What should I do to solve this problem? I want the navigation to be responsive, did I use the bootstrap code wrongly or what? Please help
UPDATE: remember that everything works I mean php retrieves the navs item, the only problem is that there's no style...
Bootstrap and Wordpress menus don't work together out of the box. In order to integrate the two, I suggest using wp-bootstrap-navwalker: https://github.com/twittem/wp-bootstrap-navwalker
Related
I'm trying to make a navigation drop down (using Bootstrap 3) where the link text has multiple different alignments on the same line.
In the code below, the links in Dropdown A have spaces characters in the HTML to align them, but the white space is ignored (I'm aware this is also bad semantically).
I am trying to get my navigation menus to be like Dropdown B and Dropdown C, but with white space instead of periods.
In Dropdown B, there is a first part (Foo) that is left-aligned, and then a second part (Bar) that is left-aligned, but with a simulated tab character between.
In Dropdown C, there is a first part (Foo) that is left-aligned, and a second part (Bar) that is right-aligned and with a simulated tab character between.
I've tried putting Foo in a span and Bar in a different span and then using either floats or text aligns to move them, but all the different things I've tried either result in the Bar part floating off the menu or dropping down onto a new line (which looks terrible).
How do I make my dropdowns look like Dropdown B and Dropdown C with semantically good HTML and CSS?
(Note: Interactive code illustrates my point much better in full screen)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">My Site</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li>Link 1</li>
<li>Link 2</li>
<li class="dropdown">
Dropdown A <span class="caret"></span>
<ul class="dropdown-menu">
<li>Foooooooo Baaaaar</li>
<li>Foo Bar</li>
</ul>
</li>
<li class="dropdown">
Dropdown B <span class="caret"></span>
<ul class="dropdown-menu">
<li>Foooooooo........Baaaaar</li>
<li>Foo....................Bar</li>
</ul>
</li>
<li class="dropdown">
Dropdown C <span class="caret"></span>
<ul class="dropdown-menu">
<li>Foooooooo........Baaaaar</li>
<li>Foo............................Bar</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
There are probably a number of ways to do it but this seems to work:
Your LI would look like this:
<li><div style="width:100%"><div class="col-xs-6 navItem leftItem">Foooooooo</div><div class="col-xs-6 navItem rightItem">Baaaaar</div></div></li>
The CSS for the entries are like this:
.navItem{
display:inline;
padding:0;
}
.leftItem{
text-align:left;
}
.rightItem{
text-align:right;
}
I've been trying to make a fluid drop-down menu like the on in udemy(https://i.imgur.com/nrorrMo.png) but the options inside my drop-down doesn't appear. Is there is anything i'm doing wrong?
<ul class="nav navbar-nav">
<li class="dropdown">
Heading 1
<div class="dropdown-menu multi-column" style="width: 100%;">
<div class="row">
<div class="col-md-4">
<ul class="dropdown-menu">
<li>Opt 1</li>
<li> Opt 2</li>
</ul>
</div>
</div>
</li>
</ul>
Your error comes with the use of the class="dropdown-menu" on the UL tag inside of the div.dropdown-menu. If you remove that class, you will see the content inside the dropdown.
ever since I entered the code for a dropdown menu, scrollspy only hovers over the work items in the drop-down. It does not apply to the other a elements. I'm pretty sure I have the right data target. Thoughts? (I've tried referencing the code on the bootstrap documentation, w3, and another person's site. I must be missing something.)
<body data-spy="scroll" data-target=".navbar">
<div class="container-fluid">
<nav class="navbar navbar-inverse, navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#mynavbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="home navbar-brand">
Home
</div><!-- end home -->
</div><!-- end navbar-header -->
<div class="collapse navbar-collapse" id="mynavbar">
<ul class="nav navbar-nav navbar-right">
<li>About</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
"Work"
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li>Work 1</li>
<li>Work 2</li>
</ul>
</li>
<li>FAQ</li>
<li>Contact
</li>
</ul>
</div><!-- nav -->
</div><!-- / nav container -->
</nav><!-- / navbar -->
This is probably too late for the original poster - but in case anybody else comes across this, the problem was probably because the target divs (or etc elements) of the dropdown links were hidden. According to Bootstrap's official documentation for ScrollSpy:
"Non-:visible target elements ignored
Target elements that are not :visible according to jQuery will be ignored and their corresponding nav items will never be highlighted."
(http://getbootstrap.com/javascript/#scrollspy)
This means if your dropdown link targets are invisible (i.e. hidden), the SpyScroll plugin won't work on them.
A workaround would be to add some hidden menus to the dropdown with the href id of some other empty elements just above and below your desired section. It may not be clear to understand my point, if anyone needs further clarification, please let me know and I'll be happy to elaborate :-)
I have searched high and low for this, on SO too but didn't find the "correct" answer.
Just figured it out myself.. Thought to share this, hope it helps someone..
Problem with BS3 is that it's Mobile first, which is a good thing, usually.. It's just that I need a few "default" options in the navbar regardless of the collapse state. Just like BS2.
So how can we do this?
One thing is obvious looking at the html code, the .navbar-header stays where it is, it doesn't collapse. Another thing, the magic collapse button has some way of hiding itself, probably CSS but hey, the idea is to abstract this layer so we don't have to worry about it..
But we can take advantage of this, let's place the links I want to show in there, they won't collapse.
What you will see is that your list items will end up vertically, that's not what you want.. So why does it do that?
Well.. If you use Firebug or some other development inspector, you will find that these items have been set to display : block;, that is making them the width of the screen pushing each next item down.
We need to change that behaviour. So let's add a new class to the ul that we can define in our custom CSS. I named it no-collapse but you can name it whatever you want..
<nav role="navigation" class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" data-toggle="collapse" data-target="#bs-navbar-collapse" class="navbar-toggle">
<span class="sr-only">Hamburger menu</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- THIS IS WHERE THE MAGIC HAPPENS! -->
<ul class="nav navbar-nav no-collapse">
<li>Apple
</li>
<li>Banana
</li>
</ul>
</div>
<!-- THE STUFF IN THIS DIV WILL COLLAPSE.. -->
<div id="bs-navbar-collapse" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="dropdown">More Fruits <b class="caret"></b>
<ul class="dropdown-menu">
<li class="dropdown-header">Citrus</li>
<li>
Lemon
</li>
<li>
Orange
</li>
<li class="divider"></li>
<li class="dropdown-header">
Also a fruit
</li>
<li>
Tomato
</li>
</ul>
</li>
<li class="dropdown">Veggies <b class="caret"></b>
<ul class="dropdown-menu">
<li class="dropdown-header">Green stuff</li>
<li>
Spinache
</li>
<li>
Lettuce
</li>
<li class="divider"></li>
<li class="dropdown-header">Other stuff</li>
<li>Carrot
</li>
<li>Romenesko broccoli
</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>
This works
</li>
</ul>
</div>
</div>
</nav>
You'll need a modification, add a CSS (or LESS/SASS) after the bootstrap style sheets.
Add this CSS:
.no-collapse li, .no-collapse li a
{
text-align : center;
float : none;
display : inline-block;
}
Now in Bootply it would look like this: http://www.bootply.com/render/133885 source here:http://www.bootply.com/133885
Now we can have the healthy Apple and Banana on the screen on our mobile devices without resorting to the hamburger menu!
I'm working with twitter bootstrap responsive nav bar and I'm trying to figure out how to make the brand show up only when the nav bar is in collapsed mode.
I'm thinking there might need to be some extra js involved but i'm not sure what that is or where to put it.
Here's what I've got:
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<!-- .btn-navbar is used as the toggle for collapsed navbar content -->
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<!-- Be sure to leave the brand out there if you want it shown -->
<a class="brand" href="#">Navigation</a>
<!-- Everything you want hidden at 940px or less, place within here -->
<div class="nav-collapse collapse">
<!-- .nav, .navbar-search, .navbar-form, etc -->
<ul class="nav nav-pills">
<li>Nav 1</li>
<li>Nav 2</li>
<li class="dropdown">
<a class="dropdown-toggle"
data-toggle="dropdown"
href="#">
Programs
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<!-- links -->
<li>Program 1</li>
<li>Program 2</li>
<li>Program 3</li>
<li class="divider"></li>
<li>Program A</li>
<li>Program B</li>
<li>Program C</li>
</ul> <!-- closes dropdown menu -->
</li> <!-- closes dropdown class -->
</ul> <!-- closes nav-pills -->
</div> <!-- closes collapse -->
</div> <!-- closes container -->
</div> <!-- closes navbar-inner -->
</div> <!-- closes overall navbar -->
Right now, brand displays all the time, but I want it to display only when in collapsed mode so viewers know that is the nav bar. They don't need to see it in larger screen modes.
Any resource might help.
Thanks for your time.
Craig
An easy way to solve this problem is to use the Responsive utility classes provided by Bootstrap:
Bootstrap 4:
Source
Bootstrap 4 alpha:
Bootstrap 3:
Example:
<a class="brand hidden-lg" href="#">Navigation</a>
Bootstrap 2:
Example:
<a class="brand hidden-desktop" href="#">Navigation</a>
For Bootstrap 3 use the below classes
Ref: http://getbootstrap.com/css/#responsive-utilities-classes
Since Bootstrap3.2 visible-xs, visible-sm etc. are deprecated. Reference: http://getbootstrap.com/css/#responsive-utilities-classes
So in this case you should use either:
<a class="brand visible-xs-block" href="#">Navigation</a>
or
<a class="brand visible-xs-inline" href="#">Navigation</a>
or
<a class="brand visible-xs-inline-block" href="#">Navigation</a>
depending what type of display property should be applied to this link.
This will display your Navigation brand link only when your navigation is collapsed