Bootstrap's sticky top causes navbar to not be scrollable - html

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.

Related

How to disable horizontal tap if content fits to mobile screen

Bootstrap 3 shopping cart is defined using bootstrap standard markup like
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<body>
<div class="container">
<div id="_info"></div>
<header class="row">
<div class="col-xs-12">
</header>
<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">
<span class="sr-only">Lüli navigeerimist</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 class="nav navbar-nav navbar-left">
<li>
....
In mobile its content width is same as mobile screen width.
However user can drag content horizontally left so that ugly white space appears in left.
How to fix this so that unnessecary left dragging is not allowed?
Maybe some element in page causes this effect?
I tried to delete elements in Chrome developer tools Elements tab but horizontal scroling is still allowed.
The problem is your header and footer both have a hard set width to them. This would normally not be an issue with proper media queries but in my opinion in order to not have to worry about adding more media queries I would just change your CSS for the header like I have below:
#media only all and (min-width: 481px)
header, .wrap {
width: 100%;
margin: 0 auto;
}
For the footer, you have a facebook toolbar that has a lot of hardset inline widths. You can hack this together by wrapping the entire element in a div and applying width: 100%; overflow: hidden; to that div but I would strongly recommend you do more research on that plugin to make it function properly or find a better plugin that will give you better results.
This did it on my comp. I just disabled the set width of the header.

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;

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.

Bootstrap with two static sections

I'm creating a mobile site using bootstrap and i'm struggling to get the CSS correct.
I am trying to create 3 sections on the page.
Navigation - this will always be at the top, so when the page scrolls, the navbar is always visible. Im using the standard bootstrap navbar for this and appears to work well.
I next have a DIV which display a pretty line graph - i would like this to be the same as the nav bar - i.e. does not scroll away.
Next i have a DIV which contains a table, this needs to be scrollable.
So essentially the top half of the screen should just be static and the bottom half containing the grid should move. This is what i've done so far! but it doesn't seem correct.
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
</nav>
<div style="padding-top:70px; z-index:100; height:430px; top:0; position:absolute; padding-right:2%">
A pretty line Graph
</div>
<div style="position:relative; height:100%; overflow-y:auto; overflow-x: hidden; padding-top:430px;">
My Table
Hopefully that makes sense.....
HTML:
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
Place your header items here
</nav>
<div class="page-header">
Place your chart here
</div>
<div class="container">
Place your table here
</div>
CSS:
body { padding-top: 70px; }

Bootstrap mobile navbar cuts off

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;