How to align an image and a navbar inside a container? - html

I am not able to align the logo and the nav bar inside the container div. The navigation bar is always below the level of the image logo. I have tried some html align attributes but it did not fix the issue. I am using bootstrap CSS, so should I change something in there ?
<header>
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<!--company logo and slogan-->
<img src="img/logo.png" alt="logo" />
<!--button for responsive navigation-->
...
<!--Nav bar-->
<div class="nav-collapse collapse">
<ul class="nav pull-right" >
...
</ul>
</div>
</div>
</div>
</div>

You could try to float left your img and your div tag as follow :
<header>
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container" style="overflow: auto; ">
<!--company logo and slogan-->
<img src="img/logo.png" style="float: left; " alt="logo" />
<!--Nav bar-->
<div class="nav-collapse collapse" style="float: left; ">
<ul class="nav pull-right" >
...
</ul>
</div>
</div>
</div>
</div>
</header>
That should make them show at the same level.

Related

Why is logo in navbar not aligned with text in container in CSS (Bootstrap)?

I have problem with alignment of my logo in my navbar in Bootstrap.
I would like to align it with my website content, but it keeps shifting to the left. Any idea why this happens and how I can solve this? I was not able to find the solution.
HTML:
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="/">
<img alt="logo" height="13" width="100" src="{% static 'images/logo1.png' %}">
</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<p class="navbar-text project-title">Part Activity</p>
<ul class="nav navbar-nav">
<li>About</li>
</ul>
</div>
</div>
</nav>
CSS:
body {
padding-top: 50px;
}
.navbar-brand {
padding: 18px 0;
}
.project-title {
color: #cc0000 !important;
font-weight: bold;
}
.active-row {
background-color: #C6EFCE;
}
PROBLEM:
Use: col-sm-1 in <div class="navbar-hearder col-sm-1">
If you increase the width
of the image, you also need to increase:
col-sm-2..
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header col-sm-1">
<a class="navbar-brand" href="/">
<img alt="logo" height="13" width="100" src="{% static 'images/logo1.png' %}">
</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<p class="navbar-text project-title">Part Activity</p>
<ul class="nav navbar-nav">
<li>About</li>
</ul>
</div>
</div>
</nav>
<div class="container">
<h3>Part Activity</h3>
<p>Master rsl</p>
</div>

Navbar not full width in bootstrap 3

I am trying to create a navbar with 100% width in bootstrap but it's not working.
<div class="container-fluid">
<nav class="navbar navbar-inverse navbar-static-top">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="#"> WebsiteName </a>
</div>
<ul class="nav navbar-nav navbar-right">
<li>About</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</div>
</nav>
</div>
Remove padding in container-fluid, create class "custom-nav-container" to overwrite.
<div class="container-fluid custom-nav-container">
<nav class="navbar navbar-inverse navbar-static-top">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="#"> WebsiteName </a>
</div>
<ul class="nav navbar-nav navbar-right">
<li>About</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</div>
</nav>
</div>
.custom-nav-container{
padding-left: 0px !important;
padding-right: 0px !important;
}
Replace
<div class="container-">
To
<div class="container-fluid">
Inside your tag. Your problem solved. Thank you.
.container has one fixed width for each screen size in bootstrap (xs,sm,md,lg). It is responsive; however, it is fixed based on screen size. .container-fluid expands to fill the available width. If you use the container-fluid and resize the browser, you may notice the content inside it will adjust with every pixel to take the full available width.
<div class="container">
<nav class="navbar navbar-inverse navbar-static-top">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="#"> WebsiteName </a>
</div>
<ul class="nav navbar-nav navbar-right">
<li>About</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</div>
</nav>
</div>

How to make a responsive navigation bar?

How can I make a responsive navigation bar where it does not cover the top of my page? I am using thymeleaf framework, and twitter bootstrap.
My Navigation code
<div th:fragment="header">
<div class="navbar navbar-inverse navbar-fixed-top" style="background-color:black;">
<div class="container">
<div class="navbar-header">
<div id="logo"><img th:src="#{/images/bg.jpg}" /></div>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a th:href="#{/}">Home</a></li>
</ul>
</div>
</div>
</div>
</div>
I don't have much css for this part because I am using twitter bootstrap.
Css
#logo
{
display:inline-block;
}
Here is an image that is blocking my page.
Take out the class navbar-fixed-top and see if that solves your issue.

center align menu in Bootstrap

Already try other solutions from this community, but nothing seams to work!!
I want to horizontally center the menu. The "logo" is left align on top of it.
Here is the code (no changes to css that matter to this):
<nav class="navbar navbar-default navbar-fixed-top">
<div class="col-lg-2">
</div>
<div class="col-lg-8">
<img class="logo" src="images/logo.png" />
<ul class="nav nav-pills">
<li>
<a href="#"><img src="images/menu/123.png" />
</a>
</li>
<li>
<a href="#"><img src="images/menu/456.png" />
</a>
</li>
<li>
<a href="#"><img src="images/menu/789.png" />
</a>
</li>
</ul>
</div>
<div class="col-lg-2">
</div>
</nav>
Edit: This solved the problem
ul {
width: 825px;
margin: auto;
}
Try changing this <div class="col-lg-8"> to this <div class="col-lg-8 col-lg-push-2 center-block">
Get rid of the two empty <div class="col-lg-2">
Try out this codes,
Bootstrap Centered Navigation
Bootstrap Centered Menu
well, solved:
ul {
width: 825px;
margin: auto;
}

Bootstrap NavBar with center aligned items

On the left side is my brandname.
I try to center the text and the icons in the navbar. But it is allwys to the left of the brandname.
<div class="navbar navbar-fixed-top hidden-sm hidden-xs">
<div class="navbar-inner">
<div style="" class="container-fluid navi">
<div class="navbar-header">
<p class="navbar-brand brand">Lapsy</p>
</div>
<div>
<ul class="nav navbar-nav navbar-center">
<li>Follow us</li>
<li><img src="img/f.png" alt="Facebook Fanpage" class="img-responsive"> </li>
<li><img src="img/t.png" alt="Twitter Fanpage" class="img-responsive"> </li>
</ul>
</div>
</div>
</div>
</div>
Give text-align:center to class navbar-inner and give text-align:left to your Brand Name. Note I gave display:inline property to ul li to put them in a single line. You can see the result here. http://jsfiddle.net/5t5sfx5h/