have some issues with my bootstrap and css - html

I want to fix the logo on the navigation bar , I want to either increase the height of navigation bar and fix it without adjusting the image size amd When i shrink the website to mobile view , The Logo is seen below the collapse button .
Preview of the website (http://threeguys.us/works/testing.html)
testing.html
<div class="jumbotron">
<div class="container">
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"><img src="images/logo/logo.png" width="250px" height="60px"></a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li class="active">Home</li>
<li>Rates</li>
<li>Employee</li>
<li>Contact Us</li>
</ul>
</div>
</div>
</nav>
<div class="call_button">
<button type="button" class="btn btn-default">call us</button>
</div>
</div>
</div><!--jumbotron end-->
style.css
.jumbotron
{
text-align: center;
background-size: cover;
background-image: url(images/car/car.png);
}
.container
{
padding:0px;
}
.navbar
{
height: 60px;
background-color: transparent;
border:0px;
padding-top: 0px;
}
.navbar-header
{
width:70px;
background-color: transparent;
}
ul
{
padding:0;
}
.call_button
{
margin-top : 428px;
}
.content
{
background-color: white;
padding-top:0px;
}
.footer-nav
{
text-align: center;
}
.text_order
{
background-image: url(images/text_order/rectangle.jpg);
text-align: center;
padding: 5px;
}
.text_order p
{
font-size: 20px;
}
.footer-nav li
{
display: inline;
}
.footer-nav li a
{
padding-left: 50px;
text-decoration: none;
color: #f7ab00;
}
.footer-nav li a:hover
{
color:black;
}

Based on your question, comments and screenshots here are the following recommendations:
Remove this CSS code from style.css so collapse button is on the right (and not above the logo):
.navbar-header {
width:70px;
background-color: transparent; //don't necessarily need to remove this one but it isn't serving a purpose currently
}
To get the nav outside of the jumbotron whilst keeping the full image screen, perform the following updates:
Update testing.html to the following:
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"><img src="images/logo/logo.png" width="250px" height="60px"></a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li class="active">Home</li>
<li>Rates</li>
<li>Employee</li>
<li>Contact Us</li>
</ul>
</div>
</div>
</nav>
<div class="jumbotron">
<div class="container">
<div class="call_button">
<button type="button" class="btn btn-default">call us</button>
</div>
</div>
</div><!--jumbotron end-->
Update your style.css jumbotron class and navbar class to the following:
.jumbotron {
text-align: center;
background-size: cover;
background-image: url(images/car/car.png);
margin-top: -80px; //include this account for the height of the navbar and it's margin
}
.navbar {
height: 60px;
background-color: transparent;
border: 0px;
padding: 0 120px; //the 120px value will push the logo and menu nav closer together. You will need to update your collapse breakpoints though. Adjust as you see fit.
}
If I haven't answered all your questions please comment below so I can update my answer.

Modify the flow of your HTML. Avoid putting nav inside .container.
Use a structure like this
This will put the logo inside the header as well as put it before the collapse button in mobile view.

Related

My Bootstrap Navbar list is not coming to the center

I'm trying to center my menu list items in the bootstrap navbar. I've tried with the many CSS styles but it is still in the left.Below is my html and css please correct me if I'm wrong with the css.[To be more specific what I want is I want those menu items right below the Logo.][1]
<div class="header-botom">
<div class="content white">
<nav class="navbar navbar-default nav-menu" role="navigation">
<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>
<div class="clearfix"></div>
<!--/.navbar-header-->
<div class="collapse navbar-collapse collapse-pdng" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav nav-font">
<li>Home</li>
<li>Ear Rings</li>
<li>Jewelry </li>
<li>Accessories</li>
</ul>
<div class="clearfix"></div>
</div>
<!--/.navbar-collapse-->
<div class="clearfix"></div>
</nav>
<div class="clearfix"></div>
</div
>
</div>
.nav-menu{
background: transparent;
border-radius: 0;
border: 0;
margin-top: 6px;
}
.navbar .{
text-align:center;
}
.navbar-nav li{
float: none;
display: inline-block;
}
[1]: https://i.stack.imgur.com/wxHSz.png
What you looking for is to add these css properties.
.navbar .navbar-nav {
display: inline-block;
float: none;
vertical-align: top;
}
.navbar .navbar-collapse {
text-align: center;
}
Possible Duplicate of this question.
JS Bin here
Add the following class in your custom css:
.navbar-nav {
text-align: center;
}
Demo:
.nav-menu {
background: transparent;
border-radius: 0;
border: 0;
margin-top: 6px;
}
.navbar . {
text-align: center;
}
.navbar-nav li {
float: none;
display: inline-block;
}
.navbar-nav {
text-align: center;
background: #e4e4e4;
}
<div class="header-botom">
<div class="content white">
<nav class="navbar navbar-default nav-menu" role="navigation">
<div class="collapse navbar-collapse collapse-pdng" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav nav-font">
<li>Home</li>
<li>Ear Rings</li>
<li>Jewelry </li>
<li>Accessories</li>
</ul>
<div class="clearfix"></div>
</div>
<div class="clearfix"></div>
</nav>
<div class="clearfix"></div>
</div>
</div>
yes its seems like i got the solution for your problem, if you are using bootstrap
add the class into your custom css file
.collapse-pdng { padding: 0px 0px; margin: 0 auto; width: 32%; }
add the following class in your html file
<div class="text-center">
<div class="collapse navbar-collapse collapse-pdng" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav nav-font">
<li>Home</li>
<li>Ear Rings</li>
<li>Jewelry </li>
<li>Accessories</li>
</ul>
<div class="clearfix"></div>
</div>
</div>
add the class text-center in div and put your whole menu in that class, i hope this will help you, please let me know

Bootstrap Navbar - align items to the middle

I am trying to create a navbar with Bootstrap, with 'navbar-brand' on the left, navbar items centered in the middle, and 2 items on the right too. First I tried to make it from scratch but I couldn't achieve making it responsive enough.
Then, I found this approach on Bootply, which is really close to the one I want with all responsiveness and navbar collapsing. However, I want to swap navbar-brand and left items; brand to be on the left, with left items in the middle; and right items keep their position.
[ Navbar-Brand Home | About | Contact | Address Right, Right]
What is the best, most convenient way to achieve it?
Here is the Snippet:
.navbar-brand {
position: absolute;
width: 100%;
left: 0;
text-align: center;
margin:0 auto;
}
.navbar-toggle {
z-index:3;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-default" role="navigation">
<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>
<a class="navbar-brand" href="#">Brand</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-left">
<li>Left</li>
<li>Left</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Right</li>
<li>Right</li>
</ul>
</div>
</nav>
You can use CSS Positioning on .navbar-left and make it in the center using CSS transform (limit it to be on tablets & desktop so that it would not affect mobile layout).
Have a look at the snippet below (use full screen):
.navbar-brand {
position: absolute;
width: auto;
left: 15px;
text-align: center;
margin:0 auto;
}
.navbar-toggle {
z-index:3;
}
/* On Tabs & Desktops */
#media screen and (min-width: 768px) {
.navbar-left {
position: absolute;
left: 50%;
transform: translateX(-50%);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-default" role="navigation">
<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>
<a class="navbar-brand" href="#">Brand</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-left">
<li>Left</li>
<li>Left</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Right</li>
<li>Right</li>
</ul>
</div>
</nav>
Hope this helps!
You can also try this:
#media screen and (min-width: 768px) {
.navbar-collapse {
position: relative;
}
.navbar-left {
position: absolute;
width: 100%;
text-align: center;
top: 0;
left: 0;
}
.navbar-left > li > a {
display: inline-block;
}
.navbar-left > li {
display: inline;
float: none;
}
}
Codepen: https://codepen.io/anon/pen/GNYNey

Navbar remain to the center with my own width in large screen

I have one navbar in one website that im building which is full width in large screen.
I am trying to make it in my own width for large screens and im stuck.
i have the code here
.navbar {
background-color: #242424;
border-bottom: 1px solid #b9b9b9;
font-family: 'Poiret One', cursive;
}
.navbar a {
color: #cccccc !important;
}
.navbar a:hover {
color: #ffffff !important;
background-color: #646464 !important;
}
.navbar-header .navbar-brand {
color: white !important;
font-size: 1.5em;
}
<!-- NAVBAR -->
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle Nav</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li>Contact</li>
</ul>
</div>
</div>
</div>
<!-- END NAVBAR -->
Do you have any suggestion of how can i make it lets say 800px for wide screens
and when its loaded in tablet to be normal width of all the tablet/smartphone screen?
This might be the simplest way to do this: you can limit the container size with a custom class at whatever media query you'd like the navbar with be 800px, then just adjust the custom container color to the navbar color and the navbar background color so it matches the body or use transparent.
See working example.
body,
html {
margin-top: 55px;
}
.navbar.navbar-custom {
background-color: #242424;
border-bottom: 1px solid #b9b9b9;
font-family: 'Poiret One', cursive;
}
.navbar.navbar-custom .navbar-nav li a {
color: #cccccc;
}
.navbar.navbar-custom .navbar-nav li a:hover {
color: #ffffff;
background-color: #646464;
}
.navbar-custom .navbar-header .navbar-brand {
color: white;
font-size: 1.5em;
}
#media (min-width: 1200px) {
.container.container-nav {
width: 800px;
background-color: #242424;
}
.container.container-content {
width: 800px;
}
.navbar.navbar-custom {
background-color: transparent;
border: none;
}
}
<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" />
<body>
<div class="navbar navbar-default navbar-custom navbar-fixed-top" role="navigation">
<div class="container container-nav">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="sr-only">Toggle Nav</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button><a class="navbar-brand" href="#">Brand</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>Home
</li>
<li>Work
</li>
<li>About
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>News
</li>
<li>Blog
</li>
<li>Contact
</li>
</ul>
</div>
</div>
</div>
<div class="container container-content">
<div class="alert alert-warning">Hello</div>
</div>
</body>

Bootstrap Nav logo issue

This should be simple, but I am missing something.
I've added in a new navbar to a bootstrap site, this looks like this
http://codepen.io/davidcochran/pen/Dihnl
However when I actually implement this into my bootstrap site it refuses to center.
<header role="banner" id="logo-main1"><div id="everything">
<img id="logo-main1" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/32877/logo-thing.png" width="200" alt="Logo Thing main logo">
<nav id="navbar-primary" class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<!-- 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-primary-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>
<div class="collapse navbar-collapse" id="navbar-primary-collapse">
<ul class="nav navbar-nav">
<li class="active">Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</header><!-- header role="banner" --></div>
CSS
.header[role="banner"] {
#logo-main {
display: block;
margin: 20px auto;
}
}
#navbar-primary.navbar-default {
background: transparent;
border: none;
.navbar-nav {
width: 100%;
text-align: center;
> li {
display: inline-block;
float: none;
> a {
padding-left: 30px;
padding-right: 30px;
}
}
}
}
.logo-main1 {
text-align: center
}
it looks like this:
!!! Link removed until further inspection !!!
Another css deceleration is probably overriding the selector and deceleration (below) which centers your navbar.
#navbar-primary.navbar-default .navbar-nav {
width: 100%;
text-align: center;

Bootstrap 3 Navbar menu item alignment

Site : http://www.Spotlightdd.co.uk
I have a navbar that has an increased size due to the logo in the middle. The logo has a -margin value to line it up with the bottom border (I know it's out by a few px). What i'm trying to do is move the text down without just increasing the size of the navbar, so it looks more centered in the navbar. Currently, i've tried using margin/padding.line-height, anything i can think of that would only move the text to no avail. If someone could try a hand at sorting it, that would be brilliant.
Thanks
(Navbar html)
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="#">
<img alt="CompanyLogo" src="img/spotlightLogo.png" style = "height: 80px" >
</a>
<button type="button" class="navbar-toggle collapsed" 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>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav nav-center">
<li> HOME </li>
<li> WEB DESIGN</li>
<li> GRAPHIC DESIGN </li>
<li> SOCIAL MEDIA </li>
<li class = "logo"> <img src = "img/spotlightLogo.png" class = "headerLogo img-responsive" alt = "spotlight" style = "height: 150px;"></li>
<li> PRINTING </li>
<li class="active"> BRANDING </li>
<li> VIDEO PRODUCTION </li>
<li> CONTACT </li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
(Navbar CSS)
.navbar-default {
border-bottom: 3px solid #CE1344;
background-image: none;
background-color: white;
}
.navbar .navbar-nav {
text-align: center;
display: inline-block;
float: none;
vertical-align: top;
}
li > a {
margin-top: 0px;
}
.navbar .navbar-nav {
display: inline-block;
float: none;
vertical-align: top;
}
.navbar .navbar-collapse {
text-align: center;
}
.headerLogo {
margin-bottom: -50px;
}
I tried to put in every bit of code relevant. Apologies because the css file is a mess at the moment.
Try adding this to your css:
.navbar-nav>li{
padding: 20px 0;
}
.navbar-nav>li.logo{
padding: 0
};
This should do the trick.
Try this:
.nav-center{
position: relative;
top: 20px;
}
li.logo {
position: relative;
bottom: 22px;
}