I have to say that i am a beginner in web design, I am trying to make a website with bootstrap and Dreamweaver CC and I have navbar and I am wondering how can a place an image at the center of the navbar but to be on the same row. Can you guys please help me?
<div class="navbar-header">
<center><img src="71f7c350c2d7d3a6eb8394f66185a3e7.jpg" alt="" width="40" height="54"/></center>
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#topFixedNavbar1"><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="#">Liceul Teoretic "Victor Babeș"</a></div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="topFixedNavbar1">
<ul class="nav navbar-nav navbar-right">
<li>Link</li>
<li class="dropdown">Dropdown<span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
</ul>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
</div>
you could use absolute positioning to get the img in the center.
img {
position: absolute;
left: 50%;
margin-left: -50px !important; //this pixel amount is equal to half your image size
display: block;
}
Related
I am trying to style an image that should fit into a navigation bar of a site and serve as the logo. The problem I am having is that it appears differently in the three main browsers.
To be explicit, when I play with the height property and make the image appear well in FF, it becomes too out-of-size for Safari and vice versa. When it comes to Chrome, the behavior is even stranger. For some reason, it simply refuses to even acknowledge that the pertinent class exists. When I check in Page Source Code and navigate to the CSS in question, the class is not there. The class that is missing is called .logo-img in the code below.
HTML:
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<img src="{% static "tshirt-theme/img/logo-kindbook.png" %}" class="logo-img" alt="Shirt Store">
<div class="navbar-buttons">
<button type="button" data-toggle="collapse" data-target=".navbar-collapse" class="navbar-toggle navbar-btn">Menu<i class="fa fa-align-justify"></i></button>
</div>
</div>
rest is omitted for brevity
CSS:
.navbar-default {
background-color: #ffffff;
border-bottom-color: transparent;
}
.navbar-default .navbar-brand {
color: #333333;
}
img.logo-img {
height: 300%; !important
}
.logo-img > img {
height: 300%; !important
}
Please forgive the !important as I was using it in attempts to troubleshoot and hack something together.
Firefox:
Safari:
Chrome:
Image blows up to its full resolution and occupies the entire page.
The question is why does this happen (especially Chrome not registering the CSS class) and how could I come up with something that will be cross-browser-compatible?
If you are using bootstrap 3 then you should reduce then image size and then remove the navbar-brand padding.
For further details bootstrap navbar
.navbar-brand {
padding: 0px !important;
}
.largeImg .navbar{
min-height:151px;
}
.largeImg .navbar-nav>li>a{
padding-top:65px;
padding-bottom:65px;
}
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class=container>
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- 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="#bs-example-navbar-collapse-1" 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>
<a class="navbar-brand" href="#"><img src="http://www.placehold.it/70x50"></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">Link <span class="sr-only">(current)</span></li>
<li>Link</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
<li role="separator" class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<div class="largeImg">
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- 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="#bs-example-navbar-collapse-1" 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>
<a class="navbar-brand" href="#"><img src="http://www.placehold.it/150x150"></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">Link <span class="sr-only">(current)</span></li>
<li>Link</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
<li role="separator" class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
</div>
</div>
I'm trying to figure out two issues.
1.
There's a lot of examples I've seen on how to center an image in the middle of a bootstrap navbar, however, I'm having issues figuring out how to prevent the image from overlapping links when the screen is shrunk down to a smaller size (without triggering hamburger menu)
Example:
JS Fiddle Example
If you shrink the screen down slowly you will see the center icon overlap the 'Reporting' link. How do I prevent this from happening? Is there a way for the image to recognize the edge of the last link and no overlap it?
2.
Is there a way for the navbar to resize in height based on the height of the image instead of the image overlapping the navbar?
Code:
<style>
.navbar-brand.navbar-center {
position: absolute;
left: 50%;
display: block;
text-align: center;
padding: 0px;
}
.navbar-toggle {
z-index:3;
}
</style>
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-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>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="">Profile</li>
<li class="">My Home</li>
<li>Administration</li>
<li class="dropdown">
Reporting <b class="caret"></b>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
<li class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
</ul>
<a class="navbar-brand navbar-center" href="http://disputebills.com"><img height="78" width="78" style="margin-right: 10px; padding: 0;" src="https://res.cloudinary.com/disputebills/image/upload/v1462474206/blue-mark_cnzgry.png" alt="Dispute Bills">
</a>
<ul class="nav navbar-nav navbar-right">
<li>Link</li>
<li class="dropdown">
Dropdown <b class="caret"></b>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
a am using the bootstrap navbar.
Since I added a brand logo the navbar itself is heigher than the buttons in the navbar. How can I increase height of the buttons to fit to the height of the navbar? I appreciate your help!
Below you will find an excerpt of my code
https://jsfiddle.net/DTcHh/16265/#&togetherjs=1vljfIHdrL
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- 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="#bs-example-navbar-collapse-1" 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>
<a class="navbar-brand" href="#"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/4c/ZDF_logo_1992-2001.png/120px-ZDF_logo_1992-2001.png" alt="Logo" height="80px"></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">Link <span class="sr-only">(current)</span></li>
<li>Link</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
<li role="separator" class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li>Link</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
Regards
Marina
In Bootstrap, the buttons in the navbar have their size set by padding. The default padding value for .navbar-brand and the navbar buttons are:
padding: 15px 15px;
If you want to increase the height of these buttons, you can override the default styling:
.navbar-brand, .nav > li > a {
padding: 30px 15px;
}
Here is your Fiddle updated to depict the changes.
I made simple bootstrap navbar, but how to get it to fit in grid system, I would like to be col-md-8 or other cause I am new to this grid system, I know how to make simple stuff but not this.
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-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>
<a class="navbar-brand" href="#">Flatie</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li>Link</li>
<li class="dropdown">
Dropdown <b class="caret"></b>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
Here is the JsFiddle
wrap it in a div with class of row or even better wrap all your code in a div of class container. like below:
<div class="container">
<div class="row">
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-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>
<a class="navbar-brand" href="#">Flatie</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li>Link</li>
<li class="dropdown">
Dropdown <b class="caret"></b>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</div><!--end of row-->
<div class="row">add other contain</div>
</div><!--end of container-->
By default nav element gets full width but if you want to include it in the grid system then include Nav element inside element having classes as per the grid system i.e. col-md-8, col-xs-6 etc..
for e.g.
'<div class="col-md-8"> <nav class="navbar navbar-default navbar-fixed-top" role="navigation">'...
... Your nav menu Code
'</nav></div><div class="col-md-4"></div>'
Ok I did it, I wrapped the container in a row, I gave the container a class col-md-8 and centered.
In css id did this with centered:
.centered {
margin: 0 auto;
float: none
}
margin 0 auto is to center
float none is because col-md-8 has float left.
I wanted to put text or image logo above navbar. Got it working with responsive utilities. The question is, Is that the right way? The problem is text/logo is 2 times mentioned on page. First in .master-logo and second in .navbar-brand.
Does it affect search engine optimization?
Is there other way to implement this?
Code to better understanding:
<header id="site-header">
<div class="container">
<div class="master-logo hidden-xs">
Brand
</div>
</div>
<nav class="navbar navbar-default navbar-static-top" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-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>
<a class="navbar-brand visible-xs" href="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>Home</li>
<li>Link</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
<li class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</header>
Don't mix up the logo with H1 tag.
Search engines don't evaluate your logo that much. They focus on the page title and the H1 Tag.