I have a simple nabber with page-scroll. It works in the desktop but when I view it in the mobile web app, it doesn't even display the menu or the toggle navigation. I am sure I am missing something with respect to mobile view but not sure. I checked couple of posts from stack overflow but didn't help. Please refer the navbar code snippet below
<nav class="navbar navbar-default navbar-fixed-top"
style="background-color: #757470; padding-left: 0px; margin: 0px; height: 64px;">
<div class="container" id="menu">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle" data-toggle="collapse"
data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
</button>
</div>
<div class="collapse navbar-collapse"
id="bs-example-navbar-collapse-1"
style="font-family: Lato; font-size: 12px;" class="gatewayNav">
<ul class="nav navbar-nav"
style="padding-top: 0px; padding-left: 0px;">
<li><div style="" class="gatewayLogo"></div>
<h1 style="padding-left: 200px;"></h1></li>
<li class="dropdown"><a data-toggle="tab" href="#home"
id="homeMenu" prevent-default="" scroll-to="home"
style="border: medium none; padding-top: 10px; padding-bottom: 0px;"><b
style="color: white; font-size: 13px;">HOME</b><br> </a></li>
<li class="dropdown"><a data-toggle="tab" href="#startups"
prevent-default="" scroll-to="startups"
style="border: medium none; padding-top: 10px; padding-bottom: 0px; color: white;"
id="startupMenu"><b style="color: white; font-size: 13px;">STARTUPS</b>
<br> </a></li>
</ul>
</div>
</div>
First make sure that you are loading jquery first and then bootstrap's javascript after that. If you have these loaded correctly then your problem may be a couple of different issues. One being that if you are not seeing the toggle button you may have some custom css for your toggle button making it have no border or something to that effect. And without the <span class="icon-bar"></span> elements in the button you may not be seeing the toggle button. Next thing I see is you have a height set for the navbar. If you are seeing the toggle button and after clicking on it you don't see the dropdown because you have a white page. You may want to consider adding padding to get your desired height instead of giving it a height.
Here is a fiddle with your navbar working. I added a top and bottom padding of 7px because bootstrap 3's navbars are 50px so to get to 64px you can just add 7 to the top and bottom. Then I added the icon bars to the toggle button so you can see it. Like I said though make sure you loaded jquery first then bootstraps js file after as well. Here is the fiddle demo JsFiddle Navbar Fix
PS if you are not going to have a dropdown menu for each of your <li> elements in your navbar then there is no reason to add the dropdown class to the <li>. Also are you going to be toggling a tab or scrolling to a section when you click on your links and all of the page breaks and strange paddings may be causing some issues. Please leave a comment after this answer so I can understand what you are trying to achieve with all of this because it looks like you have a lot of conflicting issues with this entire markup and I am just trying to understand what you are trying to do so maybe I can help.
Related
When I open the Boostrap 4 Modal on my page, it shifts the page contents to the left slightly. I have managed to prevent this from happening to most of the content by adding a css class to the body when the modal is opened. However, for some reason this is not working for my nav's contents and they are being shifted to the left still when the modal is open. How can I fix this? Any help would be great, thanks.
HTML
<body>
<nav class="navbar navbar-expand-lg navbar-light fixed-top" id="navFixed">
<div class="container-fluid container">
<a class="navbar-brand" href="javascript:void(0);" onclick="navigateToPage()">
MyNav
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#myNavbar" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="javascript:void(0);" onclick="navigateToPage()" title="Home">Home</a>
</li>
...
</ul>
</div>
</div>
</nav>
...
</body>
JS
$('#demoModal').on('show.bs.modal', function (e) {
$('body, nav > .container').addClass('test');
})
CSS
.test[style] {
padding-right: 0 !important;
color: red;
}
.test.modal-open {
overflow: auto !important;
}
body.modal-open {
margin-right: 0px
}
When trying to find the cause of this kind of errors what i do is remove all the page CSS (commenting it or renaming the css file and creating a blank one) then start uncommenting / adding css rules by blocks or by importance (for instance the first one you may want to add is the boostrap css file) and test and repeat until i find the culprit
My second aproach is to do the opposite, create a blank page and start adding the code (html, css, javascript) from the most important to the least important (first jquery then boostrap, the bootstrap blank page html, modal example...)
Same with the javascript, because sometimes javascript also changes CSS, specially if you have javascript plugins
Question Background:
I'm using Twitter Bootstrap on my site and have incorporated a collpasing navbar for my sites menu.
The Issue:
The NavBarcollapses to a button as expected but when the screen hits a certain width the logo I have within the NavBarand the menu items split onto two separate lines. The following shows the issue:
This is the navbar with the page fully expanded and working as desired:
This is with the page slightly minimized and response, notice the NavBar has now split into two lines. This is not the desired behavior I want. I ideally I want the option to stay on the same line or collapse to a button:
This shows the NavBar fully collapsed:
The Code:
This is my NavBar markup. I cannot see why I'm seeing the above unwanted behavior with the NavBarseparating into two lines:
<div class="navbar navbar-fixed-top">
<nav class="navbar navbar-default" role="navigation" id="nav">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" 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>
<a class="navbar-brand">FM<b>FC</b></a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>Welcome</li>
<li>Club</li>
<li>About Us</li>
<li>Gallery</li>
<li>Committee</li>
<li>Contact Us</li>
<li>Location</li>
<li><a href='#Url.Action("FutureEvents", "Events", new { pageNo = 1 })'>Events</a></li>
</ul>
</div>
</div>
</nav>
</div>
Any help in working out this issue would be appreciated.
The nav is wrapping in to 2 lines because you have many menu items and the Bootstrap container switches to 750px as the screen width shrinks. You have 2 options..
One option is to use the full width container-fluid (this may not work for your design):
http://codeply.com/go/TfbwIivilI
Another option is to decrease the point at which the navbar collapses. This requires CSS to override the default navbar collapse point. In your case around 1000px seems to work best:
http://codeply.com/go/kcaXYh7ARB
It happenes because you have so many li elements, so what you need is to change the collapse break point. Just add the following to your css
#media(max-width:992px) {
.nav>li>a {
padding-left: 10px;
padding-right:10px
}
}
bootply.
When i tried to make my navbar static I came across something weird. I am having a space between the navbar and the topside of my website.
Any ideas on how to fix this so that my navbar will be in the place of the open space? (I am bad at explaining things i know....)
<body>
<div id="wrapper">
<div class= "navbar navbar-inverse navbar-static-top">
<div class="container">
BlahBlahism
<button class="navbar-toggle" data-toggle = "collapse" data-target= ".navHeaderCollapse">
<span class = "icon-bar"></span>
<span class = "icon-bar"></span>
<span class = "icon-bar"></span>
</button>
<div class="collapse navbar-collapse navHeaderCollapse">
<ul class="nav navbar-nav navbar-right">
<li>Home</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
There is no CSS involved
This code works fine when i tried running.
but still you should try using this.
some versions of internet explorer do not support class nav or nav-bar please check
hope this would help
body, html {
margin: 0px;
padding: 0px;
}
I don't know what your code says, but I'm guessing it has something to do with the default behaviour of the elements in question.
Possible solution:
Make a little CSS and remove padding and/or margin.
<style>
#theNavbarID{
padding: 0px;
margin: 0px;
}
</style>
Post some code and I'll expand upon it if need be.
EDIT:
Code works just fine, you can try it here:
JSFiddle
I'm trying to do a simple thing: a top bar (like a fixed navbar) that has a brand name on the left and 2 icons on the right. I'm developping for mobile, so I don't want it to change (collapse, like a navbar does by default) for small screens.
I'm relatively new to Bootstrap, so I guess I'm doing something wrong.
In order to prevent the collapse, I put everything in the navbar-header div. I created a <span class="pull-right"> to get the icons to the right, but I can't get them to render correctly.
(I doubt if this matters, but I'm using Bootstrap 3.0.x.)
This is what I currently have: http://jsfiddle.net/rd73tecL/2/
Try using the following CSS to disable the collapsing effect (as referenced here: Bootstrap 3 - disable navbar collapse):
.navbar-collapse.collapse {
display: block !important;
}
.navbar-nav>li, .navbar-nav {
float: left !important;
}
.navbar-nav.navbar-right:last-child {
margin-right: -15px !important;
}
.navbar-right {
float: right !important;
}
I'm unsure as to what you mean by 2 icons on the right: to the immediate right of the logo or right of the navbar? If the latter case, you could put your nav bar links into a div and add the pull-right class to put it to the right of the navbar. You would then also need to add display: inline-block !important; to the css of your navbar logo, as shown in this JSfiddle
Hope that helps.
Try using this code:
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="#">Fibe</a>
<span class="navbar-right pull-right">
<ul class="navbar-nav nav">
<li class="navbar-link"><span class="glyphicon glyphicon-search"></span></li>
<li class="navbar-link"><span class="glyphicon glyphicon-star"></span></li>
</ul>
</span>
</div>
</div>
</nav>
Just amended
<span class="navbar-right"> with <span class="navbar-right pull-right">
Hope this helps.
I'm building a site with Bootstrap. For some reason, the mobile navbar cuts off "Menu" as you can see here:
I'm just using normal Bootstrap responsive code for the navbar:
<div class="navbar-wrapper">
<div class="container">
<div class="navbar navbar-inverse">
<div class="navbar-inner">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">Menu</a>
<div class="nav-collapse collapse">
Trouble is, if I add any sort of padding, it adds too much padding to the non-mobile navbar and makes it look weird. Has this happened to anyone else?
In your theme.css file you have:
.navbar-inner {
border-radius: 0;
margin: -20px 0; <-- *
}
* This is putting your inner navbar off the top of the page. Either remove it or change it to -10px;