I am trying to make a fixed bottom navbar that will slide up when it is collapsed. As far as I can tell i have it set up right, but when I click the collapse button nothing happens.
here is my html:
<nav class="navbar navbar-inverse navbar-fixed-bottom " role="navigation">
<div class="container-fluid">
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand page-scroll animated infinite pulse" href="#page-top"><img src='assets/images/logo.png'></a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>
<a class="page-scroll" href="#troposphere">TROPOSHPERE</a>
</li>
<li>
<a class="page-scroll" href="#stratosphere">STRATOSPHERE</a>
</li>
<li>
<a class="page-scroll" href="#mesosphere">MESOSPHERE</a>
</li>
<li>
<a class="page-scroll" href="#thermosphere">THERMOSPHERE</a>
</li>
<li>
<a class="page-scroll" href="#exosphere">EXOSPHERE</a>
</li>
</ul>
</div>
</div>
</nav>
I'd love some help if you can see what I've done wrong.
Related
On smaller devices the text ("JH") currently moves underneath the collapsed menu toggle on the left side of the navbar - is there a way to align it so that "JH" is level with the menu toggle but on the right side of the navbar instead? I'm struggling with how to achieve this but I'm sure it's very simple. Many thanks in advance, Jon
My code is as follows:-
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<button class="navbar-toggle" data-target=".navbar-collapse"
data-toggle="collapse" type="button"><span class=
"icon-bar"></span> <span class="icon-bar"></span> <span class=
"icon-bar"></span></button>
</div>
<ul class="nav navbar-nav navbar-left">
<li class="active">
JH
</li>
</ul>
<div class="navbar-collapse collapse" id="navbar">
<ul class="nav navbar-nav navbar-right">
<li>
<span>About</span>
</li>
<li>
<span>Resume</span>
</li>
<li>
<span>Portfolio</span>
</li>
<li>
<span>Blog</span>
</li>
<li>
<span>Contact</span>
</li>
</ul>
</div>
</div>
</nav>
http://www.jonhowlett.uk/
Put this
<ul class="nav navbar-nav navbar-left">
<li class="active">
JH
</li>
</ul>
inside <div class="navbar-header">
<div class="navbar-header">
<button class="navbar-toggle" data-target=".navbar-collapse"
data-toggle="collapse" type="button"><span class=
"icon-bar"></span> <span class="icon-bar"></span> <span class=
"icon-bar"></span></button>
<ul class="nav navbar-nav navbar-left">
<li class="active">
JH
</li>
</ul>
</div>
You're navbar has add HTML that shouldn't be necessary. See docs.
<ul class="nav navbar-nav navbar-left">
<li class="active">
JH
</li>
</ul>
If you want to add a background color to the brand, just use CSS. See example.
.navbar.navbar-custom .navbar-brand {
background: #e7e7e7;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-default navbar-custom">
<div class="container">
<div class="navbar-header">
<button class="navbar-toggle" data-target=".navbar-collapse" data-toggle="collapse" type="button"><span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span>
</button> <a class="navbar-brand" href="http://www.jonhowlett.uk/home.html">JH</a>
</div>
<div class="navbar-collapse collapse" id="navbar">
<ul class="nav navbar-nav navbar-right">
<li> <span>About</span>
</li>
<li> <span>Resume</span>
</li>
<li> <span>Portfolio</span>
</li>
<li> <span>Blog</span>
</li>
<li> <span>Contact</span>
</li>
</ul>
</div>
</div>
</nav>
For some reason I cannot get the navbar to change. I tried to make it transparent. I know bootstrap navbar is normally an image so I included background-image: none.
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<span class="sr-only">Toggle navigation</span>
</button>
<a class="navbar-brand page-scroll" href="#intro">Eric West</a>
</div>
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<li class="hidden">
<a class="page-scroll" href="#page-top"></a>
</li>
<li>
<a class="page-scroll" href="#about">About</a>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>
<a class="page-scroll" href="#projects">Projects</a>
</li>
<li>
<a class="page-scroll" href="#contact">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
CSS:
navbar {
background-color: transparent;
background: transparent;
background-image: none;
}
Don't remove .navbar-inverse (or .navbar-default) unless you plan on adding some custom CSS to make up for it because these add properties to the nav, in particular to the navbar-toggle class.
Without one of those you'll remove alot of CSS from your nav and the navbar-toggle will not be visible on a device under 768px, it will be there and actionable but you won't be able to see it.
I would add a custom nav class and use that to override the property you need to change.
See example with that includes one with and one without the additional property.
body,
html {
background: grey;
margin-top: 50px;
}
.navbar.navbar-custom {
background-color: transparent;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-inverse navbar-custom navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-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 page-scroll" href="#intro">Custom Navbar</a>
</div>
<div class="collapse navbar-collapse navbar-1">
<ul class="nav navbar-nav">
<li class="hidden">
<a class="page-scroll" href="#page-top"></a>
</li>
<li> <a class="page-scroll" href="#about">About</a>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li> <a class="page-scroll" href="#projects">Projects</a>
</li>
<li> <a class="page-scroll" href="#contact">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
<nav class="navbar">
<div class="container-fluid">
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-2"> <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 page-scroll" href="#intro">Navbar Only</a>
</div>
<div class="collapse navbar-collapse navbar-2">
<ul class="nav navbar-nav">
<li class="hidden">
<a class="page-scroll" href="#page-top"></a>
</li>
<li> <a class="page-scroll" href="#about">About</a>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li> <a class="page-scroll" href="#projects">Projects</a>
</li>
<li> <a class="page-scroll" href="#contact">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
Not sure if it is a typo on your end, but you need to add a . to target the navbar class in css like so:
.navbar {
background-color: transparent;
background: transparent;
background-image: none;
}
As mentioned by #Benya16, the navbar-inverse class modifies the base attributes of the navbar, you can read about that in the docs here. If you remove that bootstrap attribute it will be the bootstrap default.
Bootstraps Navbar is defined by its CSS file. To change the color, simply do.navbar-default:background-color: transparent !important although !important is not best practise, you can always change the color in the Bootstrap.css file.
Bootstrap.css - line 4594 to find the .navbar-inverse background color.
do ctrl-f and type navbar-defualt to find that one too.
This simple thing is frustrating me for hours. I have a simple navigation bar which has a brand logo. But the logo disappears sometimes(still loaded but hidden below) from the navigation bar.
HTML:
<nav class="header_blue navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle pull-left" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="navbar-inner">
<a class="navbar-brand" href="">
<img id="my_img" style="display:block !important;" src="img/logo_img.png" alt="logo_img" class="img-responsive">
</a>
</div>
</div>
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
</ul>
<div class="nav navbar-nav navbar-right" ng-hide="currentUserSignedIn">
<ul class="list-inline pull-right">
<li>
Register
</li>
<li>
<a href="" id="sign_in" data-target="login_modal" >Sign In</a>
</li>
</ul>
</div>
</div>
</div></nav>
CSS:
.header_blue{
background:none repeat scroll 0% 0% #073648;}
I am trying to make the picture 100% but it wont work.
Code:
html:
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-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 page-scroll" href="#page-top">Start Bootstrap</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav navbar-right">
<!-- Hidden li included to remove active class from about link when scrolled up past about section -->
<li class="hidden">
<a class="page-scroll" href="#page-top"></a>
</li>
<li>
<a class="page-scroll" href="#about">About</a>
</li>
<li>
<a class="page-scroll" href="#services">Services</a>
</li>
<li>
<a class="page-scroll" href="#contact">Contact</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<!-- Intro Section -->
<div class="headerimg"
><img src="pix/stockvault-city-skyline-at-sunset-113039.jpg">
</div>
<section id="intro" class="intro-section">
<div class="container">
Tell Me More
</div>
</section>
css:
.headerimg {
width: 50%;
height: 100px; }
It would be very helpful if anyone can help. I am usually able to do it but for some reason I am unable to do it this time. Thanks again for your help.
Just change CSS to:
.headerimg
{
width: 50%;
height: 100px;
}
img {
width: 100%;
}
It will make Image 100% in width.
look this : http://jsfiddle.net/cadh3vv9/
try the follow code
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-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 page-scroll" href="#page-top">Start Bootstrap</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav navbar-right">
<!-- Hidden li included to remove active class from about link when scrolled up past about section -->
<li class="hidden">
<a class="page-scroll" href="#page-top"></a>
</li>
<li>
<a class="page-scroll" href="#about">About</a>
</li>
<li>
<a class="page-scroll" href="#services">Services</a>
</li>
<li>
<a class="page-scroll" href="#contact">Contact</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<!-- Intro Section -->
<div class="headerimg"
><img style="width=50%" src="pix/stockvault-city-skyline-at-sunset-113039.jpg">
</div>
<section id="intro" class="intro-section">
<div class="container">
Tell Me More
</div>
</section>
I styled the image to 50% width you also want it to be 100 px height well thats wrong, its something like telling the browser show a pic of a roadkilled dog, you must define what you preffer, width or height because image resize uses one of these values to resize correct
I am having issue with using bootstrap navbar with an image logo that overflows on the navbar. The issue is on the collapsed menu when opened on the iPhone. It looks something like this:
Here's the link to my site. Here's how I handle the image logo on the navbar:
<div class="navbar navbar-default navbar-fixed-top brandon-grotesque-bold">
<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 class="navbar-brand nav-title-logo" href="http://test.com/"> </a>
</div>
<div class="navbar-collapse in" id="navbar-collapse" style="height: auto;">
<ul class="nav navbar-nav navbar-left">
<li>
<a href="/">
Home
</a>
</li>
<li>
<a href="/tentang-kami">
Apaan sih ni?
</a>
</li>
<li>
<a href="/cara-bergabung">
Mau gabung?
</a>
</li>
<li>
<a href="/faq">
Faq
</a>
</li><li>
<a href="/contact">
Contact Us
</a>
</li>
</ul>
<ul id="registerCart" class="nav navbar-nav navbar-right">
<li>
Register
</li>
<li class="divider-vertical"></li>
<li>
Login
</li>
</ul>
</div>
</div>
I am using a background image for the logo. Any ideas on how to fix this? It seems that when I remove: webkit-box-sizing: border-box; from bootstrap it works just fine. I am not sure if this is the way to go.
What about adding something like
.navbar-collapse {
min-width: 100px;
}