Bootstrap mobile navbar cuts off - html

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;

Related

Bootstrap's sticky top causes navbar to not be scrollable

I can decide between either using sticky-top (or fixed-top) or my Navbar being scrollable on a mobile device. Meaning that whenever I add sticky-top the scrolling functionality disappears or when I give the scrolling a higher priority, the navbar is not sticking to the top anymore. I got another object above the navbar, that's why I'd like to use Bootstrap's sticky-top functionality.
I tried different approaches to making my navbar scrollable and different approaches to make my navbar sticky, but they didn't work together. It wasn't scrollable until I wrapped the entire nav in another div.
My navbar looks like this:
<div class="jumbotron jumbotron-fluid jumbotron_custom" style="margin-bottom: 0px">
<h1>Some Text</h1>
</div>
<div class="sticky-top nav-wrapper">
<nav class="navbar navbar-expand-xl navbar-dark navbar-default">
<button class="navbar-toggler" type="button" data-toggle="collapse"
data-target="#collapsingNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse" id="collapsingNavbar">
</div>
</nav>
</div>
and the relevant code in my Custom CSS File looks like this:
#media (max-width: 1199.98px) {
.navbar-wrapper{
height: 100%;
max-height: 100%;
width: 100%;
overflow-y:scroll;
-webkit-overflow-scrolling: touch;
overflow: hidden;
}
}
I'm using Bootstrap 4
I want the Navbar to always be sticky while having the scrolling functionality on mobile devices.

navbar not working in mobile web app

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.

CSS calculated width adds margin

I am stumped. I am using Bootstrap 3 static nav bar with a logo. I don't like how the responsive image works, so I would just like to calculate the size of the logo (image) to be 100% - 200px (width of hamburger toggle). I'm doing this so that the logo and hamburger can stay on the same "line" and don't increase the height of the navbar.
Here is my code snippet.
<nav class="navbar navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#collapsable-nav">
Menu <i class="fa fa-2x fa-bars"></i>
</button>
<a class="navbar-brand" href="index.html">
<img src="images/logo.png"/>
</a>
</div>
....
</div>
In my CSS, if I add
.navbar-brand img{
width:calc(100% - 200px);
height: auto;
}
and then using Chrome Developer Tools, I see extra margin on the right.
But there is no extra (right) margin defined in the css.
Now, if i manually change the width in chrome dev tools to the calculated width (in this example it is 310px) -- then it works correctly.
It seems like when I am using the calculated width, it adds a right margin, which causes the logo and hamburger to break to different lines. I have reviewed my CSS in Chrome Dev Tools and diff'd the two examples -- but can't find differences.
Any guidance as to WHY this is happening and how to fix it would be appreciated. Let me know if you need more code snippets.
Please try to use float option.
i.e:
Use "pull-left" class in "navbar-brand" and specify the width
.navbar-brand {
width: calc(100% - 20px);
}
.navbar-brand img{
width: 100%;
height: auto
}
This may help you.
You should try wrapping the entire nav element in "container-fluid" as the javascript for bootstrap, and the styles within bootstrap are likely stepping in between your nav elements, and adding "container-fluid" or (full size responsive container" to JUST your nav-header elements.
So begin by changing:
<nav class="navbar navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
To:
<div class="container-fluid"> <!--Move this around entire nav element oor eliminate entirely-->
<nav class="navbar navbar-fixed-top" role="navigation">
<div class="navbar-header">
It is not an actual margin. When block elements does not extend to full width, dev tools shows the excess space as margin to show the layout.
In your case, please check if any value for display is inherited for this element.
Adding float will remove this highlight.
The problem was with the width of the navbar-brand element. I changed the width of that to
width:calc(100% - 200px);
and then set the width of the logo to
width: calc(100% - 10px);
and that gave me the desired effect and I don't have the navbar-brand logo with a line break.
use the below code to solve the above div width problem. if it is displaying different in different browser then write for Moz -moz-box-sizing:border-box,
Webkit -webkit-box-sizing:border-box;
box-sizing:border-box;

How can i get rid of the open space between the topside of my website and my navigation bar (bootstrap)

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

Use Bootstrap navbar as a fixed top bar that doesn't collapse

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.