I have 3 div's inside a container div for a fixed top navbar, how can I stop one div from sliding underneath another, which makes the nav bar taller. Here is my code, its using bootstrap. Essentially the navbar-header div is sliding underneath the header-full-title div, i want it to force it to resize since its an img-responsive.
<nav class="navbar navbar-default navbar-fixed-top navbar-header-full">
<div class="container">
<div class="header-full-title img-responsive">
<img src="~/Content/img/MTC_logo_header.png" class="img-responsive" />
</div>
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<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="~/Content/img/MTC_logo_header.png" class="img-responsive" alt="">
</a>*#
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class=" nav navbar-nav navbar-right">
<li>OUR STORY</li>
<li>VISIT</li>
<li>DIRECTORY</li>
<li>CONDOS</li>
<li>APARTMENTS</li>
<li class="dropdown">
EVENTS
<ul class="dropdown-menu dropDownMTC pull-right">
<li>YOGA ROCKS THE PARK</li>
<li role="separator" class="divider"></li>
<li>MONDAY NIGHT MOVIES</li>
<li role="separator" class="divider"></li>
<li>HORSES OF HONOR</li>
<li role="separator" class="divider"></li>
<li>THURSDAY IN THE PARK</li>
<li role="separator" class="divider"></li>
<li>EVENT SHUTTLE</li>
<li role="separator" class="divider"></li>
<li>HOLIDAY LIGHTS FESTIVAL</li>
</ul>
</li>
<li>NEWS</li>
</ul>
</div>
</div>
</nav>
CSS
.header-full-title {
float: left;
padding-left: 20px;
}
#media is probably your best bet. Making sure the nav bars only move and shrink when #media is activated.
Above suggestions are just as good as well.
I went with media queries works great just had to move the navbar a bit height wise and reduce padding here and there.
Related
I can't get my fixed top navbar working in Angular.
My main app.component template is:
<page-header></page-header>
<router-outlet></router-outlet>
And the bootstrap navbar is included in my page-header:
<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="#navbar" aria-expanded="false" aria-controls="navbar">
<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="#">Project name</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</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 class="dropdown-header">Nav header</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Default</li>
<li>Static top</li>
<li class="active">Fixed top <span class="sr-only">(current)</span></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
My router-outlet hast 300% height. What I want to achieve now is that the page-header stays fixed at the top. Is this even possible with Angular and bootstrap 4?
Fixed it by changing navbar-fixed-top to only fixed-top
I have a bootstrap navbar fixed top that is using the navbar toggle icon bar. When I resize the browser the icon bar is pushed below the logo which makes the nav bar taller, I need it to force the logo to resize because it's using the img-responsive class and keep the navbar 50px tall. I tried setting the wrapper Div to overflow:auto which someone on here suggested in another question but that didnt work.
HTML
<div style="overflow:auto;">
<nav class="navbar navbar-default navbar-fixed-top navbar-header-full">
<div class="header-full-title img-responsive">
<img src="/Content/img/MTC_logo_header.png" class="img-responsive" />
</div>
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<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 id="navbar" class="navbar-collapse collapse">
<ul class=" nav navbar-nav navbar-right">
<li>OUR STORY</li>
<li>VISIT</li>
<li>DIRECTORY</li>
<li>CONDOS</li>
<li>APARTMENTS</li>
<li class="dropdown">
EVENTS
<ul class="dropdown-menu dropDownMTC pull-right">
<li>YOGA ROCKS THE PARK</li>
<li role="separator" class="divider"></li>
<li>MONDAY NIGHT MOVIES</li>
<li role="separator" class="divider"></li>
<li>HORSES OF HONOR</li>
<li role="separator" class="divider"></li>
<li>THURSDAY IN THE PARK</li>
<li role="separator" class="divider"></li>
<li>EVENT SHUTTLE</li>
<li role="separator" class="divider"></li>
<li>HOLIDAY LIGHTS FESTIVAL</li>
</ul>
</li>
<li>NEWS</li>
</ul>
</div>
</nav>
</div>
Now, if you are talking in terms of the wrapping. Remember that there are often scenarios where things may not look the way you want them to at certain sizes, but the goal is to focus on common screen dimensions as there is a good chance nobody may ever see the issue. You can use Chrome's built-in emulator to test different device dimensions, or a number of web-based utilities.
Secondy, if the header image is intended to be a logo or brand-image, you can always leverage Bootstrap's built-in class
.navbar-brand
Which, in your case would look something like this.
<a href="#" class="navbar-brand">
<div class="header-full-title">
<img src="http://via.placeholder.com/100x50" />
</div>
</a>
I am using the bootstrap navbar fixed at the top and the toggle doesnt show when I resize the browser. I dont know what i am missing but everything else is working fine. I followed the code on the navbar example site here : Fixed top navbar example
<div>
<nav class="navbar navbar-fixed-top navbar-header-full navbar-default">
<div class="header-full-title">
<img src="~/Content/img/MTC_logo_header.png" class="img-responsive" />
</div>
<div id="navbar" class="navbar-collapse collapse">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle=".navbar-collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar">VISIT</span>
<span class="icon-bar">DIRECTORY</span>
<span class="icon-bar">CONDOS</span>
</button>
</div>
<ul class=" nav navbar-nav navbar-right">
<li>OUR STORY</li>
<li>VISIT</li>
<li>DIRECTORY</li>
<li>CONDOS</li>
<li>APARTMENTS</li>
<li class="dropdown">
EVENTS
<ul class="dropdown-menu dropDownMTC pull-right">
<li>YOGA ROCKS THE PARK</li>
<li role="separator" class="divider"></li>
<li>MONDAY NIGHT MOVIES</li>
<li role="separator" class="divider"></li>
<li>HORSES OF HONOR</li>
<li role="separator" class="divider"></li>
<li>THURSDAY IN THE PARK</li>
<li role="separator" class="divider"></li>
<li>EVENT SHUTTLE</li>
<li role="separator" class="divider"></li>
<li>HOLIDAY LIGHTS FESTIVAL</li>
</ul>
</li>
<li>NEWS</li>
</ul>
</div>
</nav>
</div>
CSS
.navStyle{
color:white;
padding:5px 5px 5px 5px;
margin: 0px;
text-decoration:none;
}
Probably because of these:
<div id="navbar" class="navbar-collapse collapse">
<button type="button" class="navbar-toggle collapsed" data-toggle=".navbar-collapse" .../>
Removing these collapse properties should make this work
<div id="navbar" class="navbar-collapse">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle=".navbar-collapse" .../>
How to change navbar/container width? Bootstrap 3
While following this I am super confused.
I am still fairly new in CSS, so I am still playing around a lot with bootstrap.
I added a div right outside of the navbar div to contain the total width.
.navbar-outer {
width:1000px;
margin-left: auto;
margin-right: auto;
}
That worked well, but as soon as I narrow the browser. The "Mobile" button no longer shows. Any suggestion on changes while keeping everything intact in the css? This is for bootstrap 3.3.4.
Full code below:
<nav class="navbar navbar-default">
<div class="navbar-outer">
<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">
<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="#">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 class="dropdown">
Action <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>
<ul class="nav navbar-nav navbar-right">
<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>
<li class="dropdown">
<img src="testimage.jpg" style="width: 25px; height: 25px;" alt="..." class="img-circle"> Me <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 -->
</div>
</nav>
I think it might be that you are setting the width with px, meaning the collapsing feature of the Bootstrap navbar cannot be triggered. I believe it collapses at 768px.
Using min-width and max-width:
.navbar-outer {
max-width:1000px;
min-width:767px;
margin-left: auto;
margin-right: auto;
}
http://jsfiddle.net/frank184/m3n3r1tg/
There seems to be an odd border-radius of 4px on my navbar in my rails app using bootsrap 3 and I cant seem to get rid of it.
I've tried
.navbar { border-radius: none}
I can't even edit the bootstrap css because I cant seem to find it. Any eloquent work arounds?
Here the HTML
<nav class="navbar navbar-default" role="navigation">
<!-- 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>
<%= link_to "app", root_path , class: "navbar-brand" %>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
</li>
</ul>
<ul class="nav navbar-nav nav-pills navbar-right">
<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 -->
</nav>
It's because none isn't a valid value for border-radius. From the specs, the values of border-radius are lengths or percentages. See the documentation.
You want the following:
.navbar { border-radius: 0; }
EXAMPLE