I am trying to create a custom navbar in Bootstrap.
I'd like to implement four things:
Right align of the nav links
Text center-align of the nav links when navbar expanded
Text right-align of the nav links when navbar collapsed
(this is the hard part) Additional nav links that are shown when the navbar is collapsed but not shown when expanded.
<div class="navbar">
<div class="navbar-inner">
<div class="ps-content">
<button type="button" class="btn btn-navbar visible-phone" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="brand">Navigation</div>
<!-- PS RHS menu items -->
<div class="visible-tablet pull-right">
<ul class="nav">
<li class="active">Active link</li>
<li class="divider-vertical"></li>
<li>Second link</li>
<li class="divider-vertical"></li>
<li>Third link</li>
</ul>
</div>
<div class="nav-collapse pull-right ">
<ul class="nav pull-right ">
<li class="active">Actives link</li>
<li class="divider-vertical"></li>
<li>Second link</li>
<li class="divider-vertical"></li>
<li>Third link</li>
</ul>
</div>
</div>
</div>
</div>
jsFiddle here: http://jsfiddle.net/robmc/M43fK/4/
I've successfully achieved 1 and 2, and am sure there's some simple CSS markup I am missing for 3, but it's point 4 that I am stumped on. I haven't seen this tried anywhere else. Any ideas?
Thanks
For question 3, you could use <li class="text-right">.
And for question 4 (a link that only displays when the navbar is collapsed) there are several different approaches. One way is to use the hidden-desktop hidden-tablet classes (since you're already using visible-*)
<ul class="nav hidden-desktop hidden-tablet">
<li>Collapsed link</li>
</ul>
Bootply Demo
Edit - Bootstrap 3 updated the three class names, depending on the size you wish to hide: .hidden-sm, .hidden-md, .hidden-lg
Edit(2) - Bootstrap 4 .hidden-* classes have changed to display classes
Related
Kindly check the following HTML code for displaying my menu section.
<div class="csidemenu collapse" id="collapseExample">
<ul>
<li>HOME</li>
<li><a data-toggle="collapse" href="#submenuwork" role="button" aria-expanded="false" aria-controls="submenuwork">WORK</a>
<ul class="collapse" id="submenuwork">
<li>All</li>
<li>Residential</li>
<li>F & B</li>
<li>Leisure</li>
<li>Retail</li>
<li>Workspaces</li>
</ul>
</li>
<li>STUDIO</li>
<li>AWARDS</li>
<li>PRESS</li>
<li>CONTACT</li>
</ul>
</div>
How can I make this dynamic by using nav menu function?
I am working on two column bootstrap based WordPress theme where i want to implement multilevel Vertical menu.. After trying for hours somehow i have achieved success in creating responsive multilevel vertical menu in HTML/CSS for which i have shared the code below. I want to implement it in WordPress nav-menu. The issue that i am facing is the sub-menu overlaps the parent menu links in bottom instead of working just like the html code that i have created and added. I know i need to work with navwalker which i tried but was unable to get success. Can you please tell me how can i achieve the same menu functionality as per the given code in WordPress nav-menu.
<div class="container">
<div class="row">
<div class="col-sm-3">
<div class="site-logo hidden-xs"><h2>Company Logo</h2></div>
<div class="sidebar-nav">
<div class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".sidebar-navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<span class="visible-xs navbar-brand">Company Logo</span>
</div>
<div class="navbar-collapse collapse sidebar-navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Menu Item 1</li>
<li>Menu Item 2</li>
<li>Dropdown <span class="pull-right"><b class="caret"></b></span>
<ul class="nav collapse" id="submenu1" role="menu" aria-labelledby="btn-1">
<li>Action</li>
<li>Sub-Dropdown <span class="pull-right"><b class="caret"></b></span>
<ul class="nav collapse" id="submenu2" role="menu" aria-labelledby="btn-2">
<li>Submenu 1</li>
<li>Submenu 2</li></ul>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
<li>Menu Item 4</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
<div class="col-sm-9">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown </p>
</div>
</div>
</div>
JSFIDDEL
You can achieve the desired menu by removing floats from the Bootstrap navbar, and setting position: static on the dropdown menu, plus a few other styling tweaks.
Then you have to do a little JavaScript to get the nested dropdown menus to work.
Here is a JSFiddle.
JavaScript courtesy of W3Schools snippet.
I have a bootstrap navbar fixed top that is using the navbar toggle icon bar. When I resize the browser the icon bar is pushed below the logo which makes the nav bar taller, I need it to force the logo to resize because it's using the img-responsive class and keep the navbar 50px tall. I tried setting the wrapper Div to overflow:auto which someone on here suggested in another question but that didnt work.
HTML
<div style="overflow:auto;">
<nav class="navbar navbar-default navbar-fixed-top navbar-header-full">
<div class="header-full-title img-responsive">
<img src="/Content/img/MTC_logo_header.png" class="img-responsive" />
</div>
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class=" nav navbar-nav navbar-right">
<li>OUR STORY</li>
<li>VISIT</li>
<li>DIRECTORY</li>
<li>CONDOS</li>
<li>APARTMENTS</li>
<li class="dropdown">
EVENTS
<ul class="dropdown-menu dropDownMTC pull-right">
<li>YOGA ROCKS THE PARK</li>
<li role="separator" class="divider"></li>
<li>MONDAY NIGHT MOVIES</li>
<li role="separator" class="divider"></li>
<li>HORSES OF HONOR</li>
<li role="separator" class="divider"></li>
<li>THURSDAY IN THE PARK</li>
<li role="separator" class="divider"></li>
<li>EVENT SHUTTLE</li>
<li role="separator" class="divider"></li>
<li>HOLIDAY LIGHTS FESTIVAL</li>
</ul>
</li>
<li>NEWS</li>
</ul>
</div>
</nav>
</div>
Now, if you are talking in terms of the wrapping. Remember that there are often scenarios where things may not look the way you want them to at certain sizes, but the goal is to focus on common screen dimensions as there is a good chance nobody may ever see the issue. You can use Chrome's built-in emulator to test different device dimensions, or a number of web-based utilities.
Secondy, if the header image is intended to be a logo or brand-image, you can always leverage Bootstrap's built-in class
.navbar-brand
Which, in your case would look something like this.
<a href="#" class="navbar-brand">
<div class="header-full-title">
<img src="http://via.placeholder.com/100x50" />
</div>
</a>
I am using the Bootstrap 3.0 framework and Modern Business theme (http://startbootstrap.com/modern-business). When using the default Modern Business nav settings, the main menu dropdowns work brilliantly as they should on mobile devices. However, when I change the menu to be "nav-justified" in the HTML code (using Bootstrap's "nav-justified" CSS class), the menu does not work as expected.
When you tap any menu item with dropdowns, it shows a navigation dropdown on the far left side, which runs outside of the parent CSS frame:
I am also using the Sticky Nav solution found here: How to use the new affix plugin in twitter's bootstrap 2.1.0?
Here is my HTML code for the menu:
<nav class="navbar navbar-inverse" role="navigation">
<div id="nav-wrapper">
<div id="nav" class="navbar">
<div class="navbar-inner">
<div class="container">
<div class="span12">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div> <!-- navbar-header -->
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav nav-justified">
<li>About</li>
<li>Services</li>
<li>Contact</li>
<li class="dropdown">
Portfolio <b class="caret"></b>
<ul class="dropdown-menu">
<li>1 Column Portfolio</li>
<li>2 Column Portfolio</li>
<li>3 Column Portfolio</li>
<li>4 Column Portfolio</li>
<li>Single Portfolio Item</li>
</ul>
</li>
<li class="dropdown">
Blog <b class="caret"></b>
<ul class="dropdown-menu">
<li>Blog Home 1</li>
<li>Blog Home 2</li>
<li>Blog Post</li>
</ul>
</li>
<li class="dropdown">
Pages <b class="caret"></b>
<ul class="dropdown-menu">
<li>Full Width Page</li>
<li>Sidebar Page</li>
<li>FAQ</li>
<li>404</li>
<li>Pricing Table</li>
</ul>
</li>
</ul>
</div> <!-- collapse -->
</div> <!-- span12 -->
</div> <!-- container -->
</div> <!-- navbar-inner -->
</div> <!-- navbar -->
</div> <!-- nav-wrapper -->
</nav>
And here is the script I have at the bottom of my HTML:
<script>
$(function() {
$('#nav-wrapper').height($("#nav").height());
$('#nav').affix({
offset: { top: $('#nav').offset().top }
});
});
</script>
Here, also, is the obligatory JSFiddle to examine (JS and CSS code linked in the JSFiddle panel on the left): http://jsfiddle.net/L94Mj/
I'm sure I'm somehow dancing around the answer, but this thing has had me stumped for two days now, and I need a fresh brain to look at things. I'm happy to provide whatever extra code is needed to help find the answer.
Using the latest version Bootstrap, I am wanting to replace the branding area text with a logo. On my desktop, it looks perfect, on my iPhone, the logo appears under the small collapse menu, whereas it should be beside it (to the left of it). If I make the logo smaller, it works fine on the iPhone, but the small logo is too small for the desktop site. I thought by adding the img-responsive class to the logo, it would shrink accordingly, but that fails. If you want to replicate this, the logo is 276px wide 40px high.
Everything appears fine on the iPhone in horizontal orientation (it is strictly a problem when viewing in vertical, which is naturally the way most people hold their phone).
Here is the related code (you will notice near the bottom, there is a purchase button, this automatically gets hidden on the iPhone, which would suffice for the logo if there is no other option). Mind, the ultimate solution would be to have the logo shrink based on screen size.
<!-- Fixed navbar -->
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.php"><img class="img-responsive" src="img/logo.png" alt=""></a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li class="dropdown">
Application <b class="caret"></b>
<ul class="dropdown-menu">
<li>Features</li>
<li>Screenshots</li>
<li>Demos</li>
<li class="divider"></li>
<li>Purchase</li>
<li>Licensing Model</li>
</ul>
</li>
<li class="dropdown">
Documentation <b class="caret"></b>
<ul class="dropdown-menu">
<li>Version Info</li>
<li>System Requirements</li>
<li class="divider"></li>
<li>Installation Guide</li>
<li>Integration Guide</li>
<li>Frontdesk Manual</li>
</ul>
</li>
<li class="dropdown">
Support <b class="caret"></b>
<ul class="dropdown-menu">
<li>Knowledgebase</li>
<li>Submit Ticket</li>
<li>View Ticket Status</li>
<li class="divider"></li>
<li>Installation Service</li>
<li>Development Services</li>
</ul>
</li>
<li class="dropdown">
Contact <b class="caret"></b>
<ul class="dropdown-menu">
<li>Presales Questions</li>
<li>Contact Us</li>
</ul>
</li>
<li class="dropdown">
Legal <b class="caret"></b>
<ul class="dropdown-menu">
<li>Privacy Policy</li>
<li>Terms of Use</li>
<li>Site Security</li>
<li class="divider"></li>
<li>Money Back Guarantee</li>
</ul>
</li>
</ul>
<button type="button" class="btn btn-success" style="margin-top: 8px; margin-left: 30px;">Purchase</button>
</div>
<!--/.nav-collapse -->
This fixes the I-phone issue with the brand logo appearing under the collapsed menu icon. you might have to play with the width a bit depending on your setup:
#media (max-width: 500px) {
.navbar-brand{
width:60%;
}
}
Put your image as a background in css with background-size:cover.