The goal is to have the right edge of the upper navigation (navbar-right) align with the right edge of the image slideshow below as the address text does now, without ever going outside the slideshow's right edge.
The trouble is that the address div is within the responsive slideshow div, allowing it to stay right-aligned when the grid size changes and "snaps" over a number of pixels. Is there some way to integrate the upper navigation into the responsive grid "snapping"?
Website draft: http://parkerrichard.com/studiogreen/html/parks.html
Desired alignment:
HTML:
<body>
<!-- row 1: static navbar -->
<nav class="navbar navbar-default navbar-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 navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand logo" href="index.html"><img class="logo" src="img/logo.png"></a>
</div><!-- navbar toggle -->
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right nav-stacked hidden-xs">
<li>PROCESS</li>
<li>OFFICE</li>
<li>CONTACT</li>
</ul>
<ul class="nav navbar-nav navbar-right hidden-lg hidden-md hidden-sm mobile-nav">
<li>PROCESS</li>
<li>OFFICE</li>
<li>CONTACT</li>
<li class="divider"><img src="img/nav-divider.jpg"></li>
</ul>
</div><!--/nav-collapse -->
</div><!--/container -->
</nav><!--/navbar -->
<!-- row 2: body -->
<div class="container">
<div class="row centered">
<!-- left sidebar -->
<aside class="navbar-collapse collapse panel-group col-lg-4 col-med-5 col-sm-5 col-xs-12" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingThree">
<h4 class="panel-title">
<a href="schools.html">
SCHOOLS
</a>
</h4>
</div>
</div>
</aside>
<!-- slideshow gallery -->
<div class="col-lg-8 col-md-7 col-sm-7 pull-left">
<div class="flexslider no-arrow">
<ul class="slides">
<li>
<img src="img/parks/img-01.jpg" />
</li>
<li>
<img src="img/parks/img-02.jpg" />
</li>
</ul>
</div>
<address class="info-box temp-box temp-add pull-right">
232 SIR FRANCIS DRAKE BLVD</br>
SAN ANSELMO, CA 94960</br>
415 721 0905
</address>
</div><!--/slideshow row -->
</div><!--/body row -->
</div><!--/container -->
CSS:
.container {
width: 100%;
}
/* ==========================================================================
General styles
========================================================================== */
html, body {
overflow-x: hidden;
}
body {
font-family: "proxima-nova", sans-serif;
font-weight: 400;
font-size: 11px;
letter-spacing: .7px;
color: #555;
-webkit-font-smoothing: antialiased;
-webkit-overflow-scrolling: touch;
}
aside {
z-index: 100;
}
address {
text-align: left;
margin-bottom: 30px;
display: none;
}
.info-box {
text-align: left;
font-weight: 400;
padding: 0px 0px 0 55px;
display: none;
}
/* ==========================================================================
Navigation styles
========================================================================== */
/*
* Top nav section
*/
.navbar-header {
padding-bottom: 50px;
}
.navbar-brand {
margin-left: 0px!important;
}
.navbar .nav {
text-align: left;
margin-top: 45px;
}
.navbar .nav > li {
float: none;
display: inline-block;
font-size: 14px;
letter-spacing: 2px;
font-weight: 600;
}
.navbar-default {
background-color: white;
border-bottom: 0px;
}
.navbar-default .navbar-nav > li > a {
color: #555;
}
.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .active > a, a:hover, a:active {
color: #6CAA3D;
background-color: transparent;
text-decoration: none;
outline: 0;
}
.navbar-default .navbar-nav > li {
padding: 0px 15px 15px 0px;
}
.navbar-collapse {
margin-top: -65px;
border-top: 0px;
border-color: none;
}
.navbar-default .navbar-collapse {
padding-top: 10px;
overflow-y: visible;
padding-left: 115px;
}
.logo {
margin-top: 10px;
height: 100px;
width: 200px;
}
.navbar-right {
padding: 15px 20px 0 0;
margin-right: 16%;
}
.mobile-nav {
width: 100px;
}
/*
* flexslider styling
*/
.flexslider {
background:none !important;
border:none !important;
box-shadow:none !important;
}
.slides li img {
-moz-user-select: -moz-none;
-khtml-user-select: none;
-webkit-user-select: none;
/*
Introduced in IE 10.
See http://ie.microsoft.com/testdrive/HTML5/msUserSelect/
*/
-ms-user-select: none;
user-select: none;
}
.flex-control-nav {
text-align: right !important;
padding-right: 0px !important;
}
.flex-control-paging li {
margin: 0 0px 0 12px !important;
}
I moved the nav div into the responsive slideshow div and added a new style to place on the right edge.
Updated HTML:
<body>
<!-- row 1: static navbar -->
<nav class="navbar navbar-default navbar-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 navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand logo" href="index.html"><img class="logo" src="img/logo.png"></a>
</div><!-- navbar toggle -->
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right hidden-lg hidden-md hidden-sm mobile-nav">
<li>PROCESS</li>
<li>OFFICE</li>
<li>CONTACT</li>
<li class="divider"><img src="img/nav-divider.jpg"></li>
</ul>
</div><!--/nav-collapse -->
</div><!--/container -->
</nav><!--/navbar -->
<!-- row 1: body -->
<div class="container">
<div class="row centered">
<!-- left sidebar -->
<aside class="navbar-collapse collapse panel-group col-lg-4 col-med-5 col-sm-5 col-xs-12" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingThree">
<h4 class="panel-title">
<a href="schools.html">
SCHOOLS
</a>
</h4>
</div>
</div>
</aside>
<!-- slideshow gallery -->
<div class="col-lg-8 col-md-7 col-sm-7">
<div class="navbar-collapse collapse plibt">
<ul class="nav navbar-nav navbar-right hidden-xs">
<li>PROCESS</li>
<li>OFFICE</li>
<li>CONTACT</li>
</ul>
</div>
<div class="flexslider nodot no-arrow pull-left">
<ul class="slides">
<li>
<img src="img/home-slideshow/img-01.jpg" />
</li>
<li>
<img src="img/home-slideshow/img-02.jpg" />
</li>
</ul>
</div>
<!-- address row -->
<address class="info-box pull-right">
232 SIR FRANCIS DRAKE BLVD</br>
SAN ANSELMO, CA 94960</br>
415 721 0905
</address>
</div><!--/slideshow row -->
</div><!--/body row -->
</div><!--/container -->
Added CSS:
.plibt {
position: absolute;
right: 0;
top: -150px;
margin: 0 -22px 0px 0 !important;
font-size: 14px;
font-weight: 600;
background: none;
}
.plibt li {
padding: 15px 0px 15px 20px !important;
}
.plibt li a {
background: none !important;
letter-spacing: 2px;
}
Related
I tried this code to create a bootstrap navigation with logo centered inside the nav bar but I'm getting an extra space on the right side of the page.
I want to fix the extra space after the navigation bar.
With this code the pages scrolls to an empty space to the right, the page should fit the navbar no extra.
#import url( 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css' );
.navbar {
text-transform: uppercase;
background-color: #27B6C9;
position: relative;
top: 0px;
font-size: 14px;
border-bottom: none;
margin-bottom: 0px;
padding: 0px 0px;
font-weight: 600;
}
.navbar-brand {
padding: 0 10px;
height: auto;
}
#media (min-width: 768px) {
.navbar-nav {
position: relative;
right: -50%;
}
.navbar-nav > li {
position: relative;
left: -50%;
}
.navbar-nav > li a {
line-height: 126px;
vertical-align: middle;
padding: 0 18px;
}
}
#media (min-width: 892px) {
.navbar-nav > li a {
padding: 0 30px;
}
}
#media (min-width: 1100px) {
.navbar-nav > li a {
padding: 0 40px;
}
}
<nav class="navbar navbar-default">
<div class="container-fluid">
<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 hidden-sm hidden-md hidden-lg" href="#">
<img src="https://raw.githubusercontent.com/reactjs/redux/master/logo/logo.png" alt="WPO LOGO" width="80" />
</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li>About
</li>
<li>Services
</li>
<li>Policies
</li>
<li class="hidden-xs">
<a href="#">
<img src="https://raw.githubusercontent.com/reactjs/redux/master/logo/logo.png" alt="Brand" width="80" />
</a>
</li>
<li>Calendar
</li>
<li>FAQ
</li>
<li>Contact
</li>
</ul>
</div>
</div>
</nav>
i add new class mr0 and add it in your button navbar
copy this class in your css and relpace your button
.mr0{
margin-right:0pxImportant;
}
<button type="button" class="navbar-toggle mr0" data-toggle="collapse"
How can I make a bootstrap navbar like that: Navbar
The image should be centered on the navbar.
Here is what I have currently:
<div class="navbar navbar-static-top">
<div class="navbar-inner">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="index.html">
<img style="height:50px;" src="http://kpv.s3.amazonaws.com/static/img/logo.jpg">
</a>
<div class="nav-collapse collapse">
<ul class="nav pull-left">
<li class="active">
Home
</li>
<li>
Pricing
</li>
<li>
FAQ
</li>
</ul>
</div>
This is the CSS that accompanies the above code:
.navbar-inner{
position:relative;
padding-left:70px;
}
.navbar .brand {
margin-left: 0px;
font-size: 20px;
font-weight: 200;
color: #777777;
text-shadow: 0 1px 0 #ffffff;
position: absolute;
width: 50px;
background: #f00;
left: 0px;
top: 0px;
padding: 10px;
}
That's my new code: http://www.bootply.com/gEoN0zJ3e8
How can I make the image centered?
Here's one way you can do this by using position:absolute to place your image. Depending on what you plan on doing for mobile, you'll have to adjust your navbar according (the example assumes the default Bootstrap behavior).
Working Example:
nav.navbar {
margin-top: 50px;
margin-bottom: 65px;
border: 0;
}
nav.navbar .navbar-collapse {
border: 0;
}
nav.navbar .navbar-brand {
position: absolute;
width: 50px;
height: 50px;
left: 50%;
top: -50px;
transform: translateX(-50%);
padding: 0px;
}
nav.navbar .navbar-brand img {
height: 150px;
width: 150px;
margin-left: -50px;
}
#media only screen and (min-width: 768px) {
nav.navbar {
margin-top: 65px;
margin-bottom: 80px;
min-height: 20px;
height: 20px;
}
nav.navbar .navbar-nav > li > a {
font-size: 12px;
padding: 0px 10px;
}
nav.navbar .navbar-brand {
top: -65px;
}
}
#media only screen and (max-width: 767px) {
nav.navbar .navbar-nav {
margin-top: 50px;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-inverse navbar-static-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">
<img src="http://placehold.it/150x150/b71c1c/fff?text=LOGO">
</a>
</div>
<div class="collapse navbar-collapse" id="navbar">
<ul class="nav navbar-nav">
<li class="active">Home
</li>
<li>Pricing
</li>
<li>FAQ
</li>
</ul>
</div>
</div>
</nav>
<div class="container">
<div class="alert alert-info">
Content
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
Here is the code. Adding class to image and adding some css style. You can change position editing .imgc class properties. Enjoy
.menu-container {
background-color:#000000;
height:40px;
}
.navbar-collapse { padding: 1px 30px;}
.navbar-brand {position:absolute;margin-top:-60px;}
.navbar-collapse {
margin-top: 100px;
margin-left: 120px;
color: #fff;
}
.imgc {margin-top:-2px;}
#nav.affix {
position:fixed;
top:0;
width:100%;
z-index:10
}
#sidebar.affix-top {
position:static
}
#sidebar.affix {
position:fixed;
top:80px
}
<div id="nav">
<div class="navbar navbar-default navbar-static">
<div class="menu-container">
<!-- .btn-navbar is used as the toggle for collapsed navbar content -->
<a class="navbar-toggle" data-target=".navbar-collapse" data-toggle="collapse"><span class="glyphicon glyphicon-bar"></span> <span class="glyphicon glyphicon-bar"></span> <span class="glyphicon glyphicon-bar"></span></a> <a class="navbar-brand" href="#"><img class="imgc" alt="" src="http://placehold.it/150x150&text=Logo"></a>
<div class="navbar-collapse collapse">
<ul>
<li>Home</li>
</ul>
</div>
</div>
</div><!-- /.navbar -->
</div>
I have my logo on the left with a white background in the header but my navbar keeps going underneath this on the right. I don't understand why this is happening. Also I don't think my navbar list is going straight across.
body {
background-color: #832040;
}
.navbar-default {
width: 100%;
height: 100px;
margin: 15px 0 0;
padding: 0;
background-color: #FFF;
}
.navbar ul.nav li a {
font-family: 'Righteous', sans-serif;
font-size: 38px;
color: #000;
padding: 25px;
margin: 0;
}
.navbar ul.nav li a:hover {
background: #000;
color: #fff;
height: 40px;
}
.logo {
width: 320px;
padding: 15px;
}
<div class="navbar-default">
<div class="logo">
<img src="HairSite/KatiesKuts-Logo.png">
</div>
<div class="navbar">
<div class="navbar nav pull-right">
<ul class="nav navabar-nav">
<li>Home</li>
<li>Bio</li>
<li>Appointments</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
you have missed out some proper html structure and classes bootstrap requires.
<div class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<div class="logo">
<img src="HairSite/KatiesKuts-Logo.png">
</div>
</div>
<div class="navbar">
<ul class="nav nav navbar-nav navbar-right">
<li>Home</li>
<li>Bio</li>
<li>Appointments</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
you could refer the following links for further references;
Logo Nav by Start Bootstrap
Navbar example form Bootstrap
This might help or give you some ideas. You're missing some HTML and I don't believe navbar-default was a class in 2.3.2.
body,
html {
background-color: #832040;
}
.navbar .navbar-inner {
background: white;
border: none;
border-radius: 0;
}
.navbar .navbar-inner .nav > li > a {
font-family: 'Righteous', sans-serif;
font-size: 15px;
color: #000;
padding-top: 50px;
padding-bottom: 50px;
}
.navbar .navbar-inner .btn-navbar {
margin-top: 45px;
}
.navbar .navbar-inner .nav > li > a:hover {
background: #000;
color: #fff;
}
#media (max-width: 991px) {
.navbar .navbar-inner .nav > li > a {
padding-top: 10px;
padding-bottom: 10px;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" />
<div class="navbar">
<div class="navbar-inner">
<div class="container-fluid">
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> <span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="brand" href="#">
<img src="http://placehold.it/320x100/000">
</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li>Home
</li>
<li>Bio
</li>
<li>Appointments
</li>
<li>Contact
</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
</div>
</div>
I have a fixed-top navigation bar with content inside that needs to be center aligned vertically. Additionally, I'm using bootstrap to me design my page. The navigation bar has two major content blocks. One is an image as my nav header and one has a container of an with links.
The container I wrapped around the two does not have any vertical padding and only has margins for content going underneath it.
<!--Navigation Bar-->
<nav class="navbar navbar-default navbar-fixed-top navbar-wrap">
<div class="container-fluid">
<div class="navbar-header">
<img src="img/logo.png" />
</div>
<ul class="nav navbar-nav navbar-right">
<li>Who Am I?</li>
<li>Projects</li>
<li>Contact</li>
</ul>
</div>
</nav>
What I have tried doing is set the .container-fluid>ul to be relative to the container and set the margin to auto. I do not want to have a fixed margin or padding for it since I want the site to scale well even on mobile devices (hence why I'm using bootstrap).
I am a very amateur developer and just trying to get a site off the ground so I can showcase my projects from school and side gigs.
Thanks in advanced, if you would like to see my CSS. I can edit it in too.
http://imgur.com/pXcwav3
.navbar-wrap {
padding: 0;
background-color: #77B69C;
}
.nav {
padding-right: 15px;
}
.navbar-right {
margin-right: 0;
}
.container-fluid>ul {
position: relative;
height: 100%;
margin: auto;
}
.navbar-default .navbar-nav>li>a {
color: #ECF0F1;
border-radius: 5px;
transition: background-color 0.5s;
}
.navbar-default .navbar-nav>li>a:hover {
color: #171F26;
background-color: #fff;
}
There are multiple ways you can handle this depending on what makes most sense.
1) You could actually use text and adjust it with CSS like in the first
navbar example.
2) You can constrain the image to the navbars default height like in
example 2.
3) And you can adjust the height and line height like in example 3 for an
image that exceeds the height of the navbar.
** Also, if you are using a preprocessor (LESS or SASS) you can easily adjust the height and the rest is handled.
I also inserted the HTML so your navbar collapses (Navbar Docs)under 768px into the mobile configuration (unsure if the omission was meant or not).
(if you do use the 2nd or 3rd option just remove the margin-top class from navbar-wrap* so the nav is fixed to the top again.)
#import url(https://fonts.googleapis.com/css?family=Hind+Vadodara);
/**Text CSS**/
.navbar.navbar-wrap {
background: #77B69C;
}
.navbar a.navbar-brand,
.navbar a.navbar-brand:hover,
.navbar a.navbar-brand:focus {
font-family: 'Hind Vadodara', sans-serif;
font-size: 30px;
color: #000;
letter-spacing: 5px;
}
.navbar .navbar-brand span.lname {
color: #fff;
}
.navbar.navbar-wrap .navbar-nav > li > a {
font-family: 'Hind Vadodara', sans-serif;
color: #ECF0F1;
border-radius: 5px;
transition: background-color 0.5s;
}
.navbar.navbar-wrap .navbar-nav > li > a:hover {
color: #171F26;
background-color: #fff;
}
#media (min-width: 768px) {
.navbar.navbar-wrap .navbar-right {
margin-right: 15px;
}
.navbar.navbar-wrap .navbar-brand {
margin-left: 15px;
}
}
/**IMG CSS**/
.navbar.navbar-wrap2 .navbar-brand {
padding: 0;
margin: 0;
}
.navbar.navbar-wrap2 .navbar-brand img {
height: 50px;
width: 300px;
padding: 0;
margin: 0;
left: 0;
}
.navbar.navbar-wrap2 {
background: #77B69C;
margin-top: 200px;
}
.navbar.navbar-wrap2 .navbar-nav > li > a {
font-family: 'Hind Vadodara', sans-serif;
color: #ECF0F1;
border-radius: 5px;
transition: background-color 0.5s;
}
.navbar.navbar-wrap2 .navbar-nav > li > a:hover {
color: #171F26;
background-color: #fff;
}
.navbar.navbar-wrap2 .navbar-brand img {
margin-left: 15px;
}
#media (min-width: 768px) {
.navbar.navbar-wrap2 .navbar-right {
margin-right: 15px;
}
}
/**LARGE IMG CSS**/
.navbar.navbar-wrap3 .navbar-brand {
padding: 0;
margin: 0;
}
.navbar.navbar-wrap3 .navbar-brand img {
height: 75px;
width: 300px;
padding: 0;
margin: 0;
left: 0;
}
.navbar.navbar-wrap3 {
background: #77B69C;
margin-top: 400px;
}
.navbar.navbar-wrap3 .navbar-header {
height: 75px;
}
.navbar.navbar-wrap3 .navbar-toggle {
margin-top: 20px;
}
.navbar.navbar-wrap3 .navbar-nav > li > a {
font-family: 'Hind Vadodara', sans-serif;
color: #ECF0F1;
border-radius: 5px;
transition: background-color 0.5s;
}
.navbar.navbar-wrap3 .navbar-nav > li > a:hover {
color: #171F26;
background-color: #fff;
}
.navbar.navbar-wrap3 .navbar-brand img {
margin-left: 15px;
}
#media (min-width: 768px) {
.navbar.navbar-wrap3 .navbar-right {
margin-right: 15px;
}
.navbar.navbar-wrap3 .navbar-nav > li > a {
line-height: 45px;
}
}
<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-wrap navbar-fixed-top">
<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-nav" 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="#"><span class="fname">James</span> <span class="lname">Wong</span></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-nav">
<ul class="nav navbar-nav navbar-right">
<li>Who Am I?
</li>
<li>Projects
</li>
<li>Contact
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<hr>
<nav class="navbar navbar-default navbar-wrap2 navbar-fixed-top">
<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-nav2" 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://academe.co.uk/wp-content/uploads/2014/10/sugarcrmLogoWhiteBackground_RGB.png" />
</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-nav2">
<ul class="nav navbar-nav navbar-right">
<li>Who Am I?
</li>
<li>Projects
</li>
<li>Contact
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<hr>
<nav class="navbar navbar-default navbar-wrap3 navbar-fixed-top">
<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-nav3" 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://academe.co.uk/wp-content/uploads/2014/10/sugarcrmLogoWhiteBackground_RGB.png" />
</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-nav3">
<ul class="nav navbar-nav navbar-right">
<li>Who Am I?
</li>
<li>Projects
</li>
<li>Contact
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
I have a Bootstrap 3 navbar. When I scale the browser window to a low resolution or access the page with my mobile I have no menu. Usually, with Bootstrap I have a collapsed navigation but it is nowhere to be found.
Here is the HTML:
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="index.php"><img src="images/logo.png"></a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li>Home</li>
<li class="aktiv" >Advertisers</li>
<li>Publishers</li>
<li>About</li>
<li>Press</li>
</ul>
</div>
</div>
</nav>
CSS:
.navbar {
background-color: #333E48;
border: 0;
display: block!important; /* From Stack Overflow */
}
.navbar-brand > img,
.navbar-brand {
padding:0px;
margin:0;
}
.navbar-brand > img {
padding: 4px;
height: 50px;
margin: auto;
vertical-align: middle;
display: inline-block;
}
.navbar-brand,
.navbar-nav li a {
line-height: 90px;
height: 90px;
padding-top: 0px;
}
.nav-collapse.collapse {
height: auto !important; /* From Stack Overflow */
overflow: visible !important; /* From Stack Overflow */
}
I added display: block!important; to .navbar after reading Nav disappears after resize
I added height: auto !important; overflow: visible !important; to .nav-collapse.collapse after reading Twitter bootstrap responsive navigation disappears after opening and closing
Issue still persists.
It isn't clear in your question but your missing the toggle button to open and close the menu when your viewport is reduced, otherwise the mobile menu will always be open.
nav.navbar-default {
background: #333E48;
border: 0;
}
.navbar-default .navbar-brand > img,
.navbar-default .navbar-brand {
padding: 0px;
margin: 0;
}
.navbar-default .navbar-brand > img {
padding: 4px;
height: 50px;
margin: auto;
vertical-align: middle;
display: inline-block;
}
.navbar-default .navbar-brand,
.navbar-default .navbar-nav li a {
line-height: 90px;
height: 90px;
padding-top: 0px;
}
.navbar-default .nav-collapse.collapse {
height: auto !important;
/* From Stack Overflow */
overflow: visible !important;
/* From Stack Overflow */
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-collapse" 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="index.php">
<img src="http://placehold.it/100x50/fff/fff" />
</a>
</div>
<div class="collapse navbar-collapse" id="bs-collapse">
<ul class="nav navbar-nav navbar-right">
<li>Home
</li>
<li class="aktiv">Advertisers
</li>
<li>Publishers
</li>
<li>About
</li>
<li>Press
</li>
</ul>
</div>
</div>
</nav>
Just have to remove the collapse class on div#navbar
Here is a fiddle
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="index.php"><img src="images/logo.png"></a>
</div>
<div id="navbar" class="navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li>Home</li>
<li class="aktiv" >Advertisers</li>
<li>Publishers</li>
<li>About</li>
<li>Press</li>
</ul>
</div>
</div>
</nav>
And rewrite the css for the xs view