I am trying to make my site's header responsive and I'm having trouble with the burger menu. The way my header is designed, the navbar breaks at tablets. I have my navbar set with a class of hidden-xs hidden-sm hidden-md which works fine. The problem is that the burger menu only displays on xs and sm. Adding a class of visible-md-block makes the burger menu not display even on devices smaller than tablets. There's just a white background with nothing else in it.... so it's just a white border. How can I display the burger menu on anything smaller than a desktop?
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed visible-xs-block visible-sm-block visible-md-block" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<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 class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul id="menu-menu-1" class="nav navbar-nav hidden-md hidden-sm">
<li><a title="Home" href="#">Home</a></li>
<li><a title="Blog" href="#">Blog</a></li>
<li><a title="Portfolio" href="#" data-toggle="dropdown" class="dropdown-toggle" aria-haspopup="true">Portfolio <span class="caret"></span></a>
<ul role="menu" class=" dropdown-menu">
<li><a title="Development Projects" href="#">Development Projects</a></li>
<li><a title="Website Templates" href="#">Website Templates</a></li>
<li><a title="Photo Gallery" href="#">Photo Gallery</a></li>
<li><a title="Graphic Design" href="#">Graphic Design</a></li>
</ul>
</li>
<li><a title="Resources" href="#" data-toggle="dropdown" class="dropdown-toggle" aria-haspopup="true">Resources <span class="caret"></span></a>
<ul role="menu" class=" dropdown-menu">
<li><a title="HTML & CSS" href="#">HTML & CSS</a></li>
<li><a title="JavaScript & jQuery" href="#">JavaScript & jQuery</a></li>
<li><a title="PHP and MySQL" href="#">PHP and MySQL</a></li>
</ul>
</li>
<li><a title="Services" href="#">Services</a></li>
<li><a title="About" href="#">About</a></li>
<li><a title="Contact" href="#">Contact</a></li>
</ul>
</div>
</nav>
with the bootstrap visible-*-block class you have to specify each size that you want to be visible. so if you add visible-sm-block and visible-xs-block you should be able to see your hamburger menu on small and extra small devices as well.
http://getbootstrap.com/css/#responsive-utilities
it looks like you also need to remove the hidden classes and then move the visible classes to the navbar-header div:
class="navbar-header visible-xs-block visible-sm-block visible-md-block"
Related
I'm using bootstrap navigation, and it's working perfectly when collapsed in android and chrome.
But when I tested it on an iPhone the dropdown list appears much lower in the screen, and I don't know what's causing this spacing.
the dropdown list also always appears behind other items like photos or sliders with iphone (works perfectly in android).
<header>
<div class="header-container">
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<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="#">
<img class="tbc-logo" src="/NewDesign/img/tbc-logo.png">
</a>
</div>
<div id="language">
عربي
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<!--NAVIGATION -->
<ul class="nav navbar-nav ">
<li>Home <span class="sr-only">(current)</span></li>
<li class="dropdown">
About Us <span class="caret"></span>
<ul class="dropdown-menu">
<li>About TBC </li>
<li>Projects</li>
</ul>
</li>
<li class="dropdown">
Our Programs <span class="caret"></span>
<ul class="dropdown-menu">
<li>Private Schools</li>
<!-- <li role="separator" class="divider"></li>-->
<li>Investment </li>
</ul>
</li>
<li>Prequalification <span class="sr-only">(current)</span></li>
<li class="dropdown">
Careers <span class="caret"></span>
<ul class="dropdown-menu">
<li> Vacancies</li>
<li> COOP Training</li>
</ul>
</li>
<li class="dropdown">
Media files <span class="caret"></span>
<ul class="dropdown-menu">
<li>News</li>
<li>Photos</li>
<li>Library </li>
</ul>
</li>
<li>Contact Us <span class="sr-only">(current)</span></li>
</ul>
<!--END NAVBAR-->
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
</div>
</header>
I'm facing the same issue with chrome in iphone as well..
I added a menu item called Registration and am trying to have it right aligned using custom.css. (I can't post a screenshot of it due to lack of reputation as this is my first post here)
The following is what I currently have in custom.css
li.nav-registration {
text-align: right;
float: right;
}
<nav class="navbar navbar-inverse 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="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a asp-area="" asp-controller="Home" asp-action="Index" class="navbar-brand">Home</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a asp-area="" asp-controller="Home" asp-action="About">About</a></li>
<li><a asp-area="" asp-controller="Music" asp-action="Index">Music</a></li>
<li><a asp-area="" asp-controller="Home" asp-action="Video">Video</a></li>
<li><a asp-area="" asp-controller="Home" asp-action="Contact">Contact</a></li>
<li class="nav-registration"><a asp-area="" asp-controller="Home" asp-action="Registration">Registration</a></li>
</ul>
</div>
</div>
</nav>
The styles in custom.css are being properly styled. However, the 'Registration' menu is still not being right aligned - any help with this would be appreciated.
As I understand you will have to create 2 separate navbar elements. One for About, Music, Video, Contact and one for Registration:
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a asp-area="" asp-controller="Home" asp-action="About">About</a></li>
<li><a asp-area="" asp-controller="Music" asp-action="Index">Music</a></li>
<li><a asp-area="" asp-controller="Home" asp-action="Video">Video</a></li>
<li><a asp-area="" asp-controller="Home" asp-action="Contact">Contact</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="nav-registration"><a asp-area="" asp-controller="Home" asp-action="Registration">Registration</a></li>
</ul>
</div>
You are not stating if you are using Bootstrap v3 or v4. Either way, the solution is the same that you will have to separate the 2 "navs". It's just the classes that you need that will change based on the bootstrap version.
Bootstrap 3 example:
https://getbootstrap.com/examples/navbar/
Bootstrap 4 navbar code:
https://v4-alpha.getbootstrap.com/components/navbar/#supported-content
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 have 3 div's inside a container div for a fixed top navbar, how can I stop one div from sliding underneath another, which makes the nav bar taller. Here is my code, its using bootstrap. Essentially the navbar-header div is sliding underneath the header-full-title div, i want it to force it to resize since its an img-responsive.
<nav class="navbar navbar-default navbar-fixed-top navbar-header-full">
<div class="container">
<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>
#*<a class="navbar-brand" href="#">
<img src="~/Content/img/MTC_logo_header.png" class="img-responsive" alt="">
</a>*#
</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>
</div>
</nav>
CSS
.header-full-title {
float: left;
padding-left: 20px;
}
#media is probably your best bet. Making sure the nav bars only move and shrink when #media is activated.
Above suggestions are just as good as well.
I went with media queries works great just had to move the navbar a bit height wise and reduce padding here and there.
I am using bootstrap 3.0. Currently for desktop screens, when someone hovers on menu items a drop down gets displayed but I want them to click the menu item to reveal the drop down similar to what happens in the mobile version.
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse"
data-target="#example-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>
<a class="navbar-brand" href="#">TutorialsPoint</a>
</div>
<div class="collapse navbar-collapse" id="example-navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">iOS</li>
<li>SVN</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
Java <b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li>jmeter</li>
<li>EJB</li>
<li>Jasper Report</li>
<li class="divider"></li>
<li>Separated link</li>
<li class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
</ul>
</div>
</nav>
The desktop version for 3.0.0 does not open up the menu unless you click on it - http://jsfiddle.net/b2qhqn6w/show/
If your menu is opening when you hover, you probably have extra script or CSS making this happen (that you need to remove)