It's a landing page with fixed navbar and anchors in a content using bootstrap scrollspy and affix. I have added affix on my top navbar via data attributes. Everything is working well, except that affixed top navbar covers top of the content.
This is how it is at this moment:
And this is how it should be:
navbar code:
<!-- navbar section -->
<nav id="navbar-scrollspy" class="navbar navbar-default" data-spy="affix" data-offset-top="58" data-offset-bottom="200">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" 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>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div id="navbar" class="collapse navbar-collapse" aria-expanded="false" style="height: 1px;">
<ul class="nav navbar-nav">
<li class="active"><strong>ГЛАВНАЯ</strong></li>
<li>КАК ЭТО <strong>РАБОТАЕТ</strong></li>
<li>КАК ПОЛУЧИТЬ <strong>ЗАЙМ</strong></li>
<li>КАК ВЕРНУТЬ <strong>ЗАЙМ</strong></li>
<li>ОТЗЫВЫ <strong>О НАС</strong></li>
</ul>
</div>
</div>
</nav>
Here's live example: http://zaim.wvb.io/
Remember as you scroll, the navbar-scrollspy element changes its classes.. With scroll at the top of the screen the classes available are class="navbar navbar-default affix-top" After you scroll down a bit, the classes change to class="navbar navbar-default affix" Because that top element flips from position: relative to position: fixed, the bottom margin gets wonky.
I'd rather see you add a margin top (45px?) to class="container form-itself" and reduce the margin-bottom from the class navbar (from 45px to 0). That would protect you everywhere.
Oops. and speaking of wonky. That same menu needs some work in mobile, but I'm guessing you haven't gotten there yet. I share your pain.
Related
I'm working on a project which has multiple links on first page. If a link is clicked application is routed to respective page with some delay. During that delay application shows a loader. But loader is displayed only for the first time I click on a link. It doesn't appear when I go back to first page and then click on a link loader doesn't appear.What may be the reason and how can I solve this problem?? Below is the HTML snippet:
<template>
<!-- MAIN MENU START -->
<require from="bootstrap/css/bootstrap.css"></require>
<nav class="navbar navbar-default topMenu" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="container-fluid">
<!-- Remove button that appears for xs devices
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#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>-->
<a class="navbar-brand nameEllipsis" id="routeTitle">${router.title}</a>
<!-- Collect the nav links, forms, and other content for toggling
.Remove this div to remove collapse features
.change display of both ul to inline-block so that they appear inline
.float 2nd ul to right to bring li to right and inline
.float 1st li of 2nd ul to left so that it displays according to the format of md and lg devices
<div class="collapse navbar-collapse" id="navbar-collapse-1"> -->
<ul style="display:inline-block;" class="nav navbar-nav navbar-left">
<li ><span class="fa fa-home"></span></li>
</ul>
<ul style="float:right;display:inline-block;" id="navigatingIcons" class="nav navbar-nav navbar-right">
<li style="float:left;" ><span class="fa fa-filter"></span></li>
<li ><span class="fa fa-cog"></span></li>
<li class="loader" show.bind="router.isNavigating">
<i class="fa fa-spinner fa-spin fa-2x"></i>
</li>
</ul>
<!-- </div>--> <!-- /.navbar-collapse -->
</div>
</nav>
<div class="">
<router-view></router-view>
</div>
</template>
Above image when application is being routed for the first time. Also, aurelia-hide class is not present for the first time.
Above image when application is routed after first time, aurelia-hide class is not removed and loader doesn't appear.
Thanks.
I have had a search and cannot find this exact problem so I hope the question is not duplicate.
First time users of Bootstrap 3.
From reading here and the bootstrap documentation I believe the navbar should have its own container such as:
<nav id="myNavbar" class="navbar navbar-default navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbarCollapse">
<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="/index.html">My Site</a>
</div>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="nav navbar-nav">
<li class="active"><span class="glyphicon glyphicon-home"></span> Home</li>
<li><span class="glyphicon glyphicon-list-alt"></span> Services</li>
<li><span class="glyphicon glyphicon-info-sign"></span> About</li>
<li><span class="glyphicon glyphicon-envelope"></span> Contact</li>
</ul>
</div>
</div>
</nav>
<div class="container">
<div class="row">content goes here and this content is under the navbar</div>
</div>
The body of the page then has its own container. Is that Correct?
I have done that and then added a row but the first row content is under the navbar.
Have I missed something like a class that I should add to the first row to ensure it starts below the navbar and not after it?
I found a similar question where the answer was to ensure the navbar had "navbar-fixed-top" but I already have that.
Read documentation carefully.
According to Bootstrap navbar docs:
The fixed navbar will overlay your other content, unless you add padding to the top of the body. Try out your own values or use our snippet below. Tip: By default, the navbar is 50px high.
body {
padding-top: 70px; // Your navbar height
}
Make sure to include this after the core Bootstrap CSS.
If I understand your problem correctly that you want content below the navbar just write
navbar-fixed
instead of
navbar-fixed-top
like this
<nav id="myNavbar" class="navbar navbar-default navbar-inverse navbar-
fixed"role="navigation">
it will work
see this fiddle fiddle
are you looking for this ???
This is caused by the Bootstrap class fixed-top, Fixed navbars use position: fixed, which pulls the Nav from the normal flow of the DOM.
For this to have an effect, having your content below the Navbar not overflow unto the Navbar, BootStrap Docs>> https://getbootstrap.com/docs/4.5/components/navbar/
Under the #Placement section, advise you to give custom CSS to the body.
Add some padding to the <body style="padding: somepadding"> element.
I am not sure why my drop down menus are not showing as buttons for this prototype with bootstrap 3?
Also, how can I make this the correct layout if I want some content for above a navigation menu? I am trying to do this without editing the bootstrap CSS and use it natively.
http://www.bootply.com/8IqCa4lI6T
<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>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-xs-4">
<img src="" class="img-responsive" alt="" height="50px" width="50px">picture
</div>
<div class="col-xs-4">
action
</div>
<div class="col-xs-4">
<span id="title">4rows text</span><br>
<span id="title">4rows text</span><br>
<span id="title">4rows text</span><br>
</div></div>
<!-- nav bottom -->
<div class="row">
<ul class="nav nav-pills navbar-nav navbar-left">
<li>menuleft1</li><li>menuleft2</li><li>menuleft3</li>
</ul><!-- /nav -->
<ul class="nav nav-pills navbar-nav navbar-right">
<li>menuright1</li><li>menuright2</li><li>menuright3</li>
</ul><!-- /right_nav -->
</div>
Here is a Bootply with the appropriate HTML to accomplish what I believe you are trying to:
http://www.bootply.com/eTDrQdGYJ7
As for placing something above the navbar. You do not need to modify the Bootstrap CSS. By giving the navbar an ID, and giving a CSS attribute to that ID, that will supercede the Bootstrap CSS.
Alternatively, it's typically okay practice to override the Bootstrap classes in a separate CSS file that is loaded in after the Bootstrap CSS file. That way you are not changing the Bootstrap CSS itself, but have control to modify styling as needed.
when the width gets < 768px it show the toggle icon on the right bottom but when I click on it it does not show the list items I defined. can anyone advise me on this? appreciated.
https://jsfiddle.net/fj0u49bj/
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#main-nav">
<span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>
</button>
<a>title</a>
</div>
<div class="collapse navbar-collapse" id="main-nav">
<ul class="nav navbar-nav navbar-right">
<li>
<a>Link2 </a>
</li>
<li>
<a>Log In</a>
<a>Sign Up</a>
</li>
</ul>
</div>
</nav>
I think you are missing to load jQuery. Bootstrap.js is build on top of jQuery which means that can not work without it.
If you do have jQuery (before bootstrap.js) than probably your navigation formatting is not properly done.
Have a look at this fiddle (link in the comment below) so you can see how a correct nav-bar must be.
I am using bootstrap in my website to make it responsive (I will be making a custom design and not use bootstrap's default css). I have created a bootstrap3 navbar but the button which appears after shrinking the viewport does not function as nothing happens when it is clicked.
I have searched for this on stackoverflow and even tried incorporating changes mentioned here. But its not working.
Javascript is enabled in my browser and I have referenced bootstrap.js in my html as well.
My code is as follows:
<div class="navbar navbar-default navbackcolor" role="navigation">
<div class="container">
<div class="comnWdth">
<!-- Brand and toggle get grouped for better mobile display -->
<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>
<span class="number">X12 X123 X123</span>
<span class="text">10am-7pm Mon-Sat</span>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav pull-right">
<li class="active">Home</li>
<li>My Account</li>
<li>Logout</li>
<li>Register</li>
<li>Login</li>
<li>My Cart</li>
</ul>
</div>
</div> <!-- End .comnWdth -->
</div> <!-- End container -->
</div> <!-- End Navbar -->
Also the toggle button and header ("X12 X123 X123 10am-7pm Mon-Sat") is appearing in different rows when collapsed. How can I make them appear in the same row when in a narrow viewport?
Thanks.
As of Bootstrap 3, you should use navbar-right instead of pull-right inside a navabr:
<ul class="nav navbar-nav navbar-right">.
As for your second question, you should probably post it separately, and include your css because there are clearly custom classes there "text" and "number" that we'll need to know to make good suggestions.