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;
}
Related
I would like to show both the logo and the button on my page in mobile version. I currently using bootstrap navbar:
<div class="navbar-header">
<a class="navbar-brand" href="#first" >
<img src="assets/logotech500px.png" alt="" style="width:20px;height:20px;">
</a>
</div>
<div class="navbar-collapse collapse" id="bs-navbar">
<ul class="nav navbar-nav">
<li>
<a class="page-scroll" class="active" href="#first">Home</a>
</li>
<li>
<a class="page-scroll" href="#one">About</a>
</li>
</ul>
</div>
With the following code only the logo inside the navbar-header is shown on mobile not the buttons, Home, About etc. I have no problems on desktop.
First: Base on your html you don't have
<nav class="navbar navbar-default">
</nav>
It should be
<nav class="navbar navbar-default">
<div class="navbar-header">
<a class="navbar-brand" href="#first">
<img src="assets/logotech500px.png" alt="" style="width:20px;height:20px;">
</a>
<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="navbar-collapse collapse" id="bs-navbar">
<ul class="nav navbar-nav">
<li>
<a class="page-scroll" class="active" href="#first">Home</a>
</li>
<li>
<a class="page-scroll" href="#one">About</a>
</li>
</ul>
</div>
</nav>
Second: Bootstrap hides the navbar-collapse in mobile but you can toggle it using a button..
A fiddle without the button..
A fiddle with the button..
Try to remove the classes navbar-collapse collapse and the id bs-navbar. These classes are related to the bootstraps library and it makes the menu colapse when the viewport detects a given width of the screen (mobile devices). By removing these classes, the buttons will always be displayed, even in mobile devices.
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.
I am trying to implement a navigation drawer theme for my website using Boostrap. I am able to convert my navbar in desktop screen size to a navigation drawer button for smaller screens. However what I am trying to achieve is get the 3 bar icons of the drawer on the left hand side and "MyName" should not be visible on smaller screen sizes. Could some one help me out?
My HTML code is:
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container"> MyName
<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">
<li class="active">ABOUT ME<span class="sr-only">(current)</span>
</li>
<li>RESUME
</li>
<li>PROJECTS
</li>
<li>BLOG
</li>
<li>CONTACT
</li>
</ul>
</div>
</div>
</div>
</body>
I have created a JSFiddle for this: https://jsfiddle.net/DTcHh/9394/
Add the following classes: hidden-xs (class="navbar-brand hidden-xs") and pull-left (class='navbar-toggle pull-left")
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container"> MyName
<button class="navbar-toggle pull-left" 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">
<li class="active">ABOUT ME<span class="sr-only">(current)</span>
</li>
<li>RESUME
</li>
<li>PROJECTS
</li>
<li>BLOG
</li>
<li>CONTACT
</li>
</ul>
</div>
</div>
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.
I do apologize but I am a beginner and I cannot figure out how to position my logo in the navbar and make everything line up correctly.
I cannot figure out how to make my logo go from this to this one
thank you for your help
<div class="navbar navbar-default navbar-static-top">
<div class="container">
<a class="brand" href="easychip.html">
<img src="images/images/chipfixx.png">
</a>
<a href="/" id="logo">
</a>
<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 class="active">Home
</li>
<li>How it Works
</li>
<li>Order Now
</li>
<li>About Us
</li>
<li class="dropdown">
<ul class="dropdown-menu">
Social Media <b class = "caret"></b>
<ul class="dropdown-menu">
<li>Twitter
</li>
<li>Facebook
</li>
<li>Google+
</li </div>
</ul>
</ul>
</div>
</div>
</div>
Try changing this:
<a class="brand" href="easychip.html">
<img src="images/images/chipfixx.png">
</a>
To this:
<a class="navbar-brand" href="easychip.html">
<img src="images/images/chipfixx.png">
</a>
I looked at the source code of my own bootstrap website and I'm pretty sure it should work.