I want to change height of navbar in bootstrap. My code:
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<div class="navbar-brand">MyDatoo</div>
</div>
<ul class="nav navbar-nav">
<li>Home</li>
<li>Page 1</li>
<li>Page 2</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><span class="glyphicon glyphicon-user"></span> Sign Up</li>
<li><span class="glyphicon glyphicon-log-in"></span> Login</li>
</ul>
</div>
</nav>
I want to change this navbar height:
.navbar {
height: 100px !important; /*i assume your navbar size 100px*/
}
if you dealing with mobile
#media only screen and (min-width: 600px) {
.navbar {
height: 100px !important;
}
}
#media only screen and (min-width: 768px) {
.navbar {
height: 120px !important;
}
}
You can add this css
.navbar {
height: YOUR_SIZE !important;
}
Related
I am trying to get a navbar to show me the menus both for bigscreen and mobile. Having some trouble.
In bigscreen I am getting as required
webname search:submit menus menus cart
But in the responsive mobile version, I am getting the search bar trying to take the entire row, with submit overlapping to the next line.
What I want is when mobile is used, show:
website name hambuger
search bar cart icon
.mobileNav {
position: absolute;
right: 20px;
top: 0px;
}
#media only screen and (max-width: 768px) {
.mobileNav {
position: absolute;
right: 80px !important;
top: 0px;
width: 195px;
text-align: right;
}
.navbar-nav .open .dropdown-menu {
text-align: right;
border: 1px solid #efefef;
margin-top: 2px;
}
.navbar-default .navbar-nav>.open>a,
.navbar-default .navbar-nav>.open>a:hover,
.navbar-default .navbar-nav>.open>a:active,
.navbar-default .navbar-nav>.open>a:focus {
background:none;
}
}
#cart {
display: inline-block;
}
#cart > a {
position: relative;
display: flex;
align-items: center;
padding: 5px;
border: 1px transparent solid;
border-radius: var(--border-radius);
color: inherit;
white-space: nowrap;
}
#cart .badge:after{
content:attr(value);
font-size:12px;
color: #fff;
background: red;
border-radius:50%;
padding: 3 5px;
position:relative;
left:-8px;
top:-10px;
opacity:0.9;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://use.fontawesome.com/releases/v5.0.1/css/all.css" rel="stylesheet"/>
<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="#">BuyBrandedDomain</a>
<form class="navbar-form navbar-left" action="/action_page.php" data-toggle="collapse" >
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li><div id="cart"><i class="fa badge fa-lg" value=11></i></div></li>
</ul>
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><span class="glyphicon glyphicon-user"></span> Sign Up</li>
<li><span class="glyphicon glyphicon-log-in"></span> Login</li>
</ul>
</div>
</div>
</nav>
I understand I have to put the cart icon code outside the collapsible to make it appear when viewed in smaller screen. I want the cart to come in that location in big screen though, and not next to the search
I've got a nav bar with a few li tags that fall under each other when on a smaller screen size. I want the nav bar to remain the same height and scroll horizontally when on a smaller device screen but everything I'm trying is not working. Can someone shine a light on what is wrong here please!
HMTL:
<nav role="navigation" class="site-navigation main-navigation">
<div class="menu">
<ul>
<li class="page_item page-item-40">Buy</li>
<li class="page_item page-item-41">Rent</li>
<li class="page_item page-item-7">Sell</li>
<li class="page_item page-item-9 current_page_item">Valuations</li>
<li class="page_item page-item-15">Property Management</li>
<li class="page_item page-item-11">About Us</li>
<li class="page_item page-item-13">Contact Us</li>
</ul>
</div>
</nav>
CSS:
#media screen and (max-width : 480px){
div.menu ul {
display: inline-block;
max-height: 34px;
overflow: auto;
white-space: nowrap;
}
div.menu a {
display: inline-block;
text-align: center;
}
}
But this currently is not working.
horizontal scroll menu mobile
<style type="text/css">
#media screen and (max-width : 480px){
div.menu ul {
display: inline-block;
width: 85%;
display: inline-block;
padding-bottom:20px;
white-space: nowrap;
overflow-y: hidden;
overflow-x: scroll;
-webkit-overflow-scrolling: touch;
-ms-overflow-style: -ms-autohiding-scrollbar;
}
div.menu li {
display: inline-block;
}
div.menu li a {
text-align: center;
}
}
</style>
<nav role="navigation" class="site-navigation main-navigation">
<div class="menu">
<ul>
<li class="page_item page-item-40">Buy</li>
<li class="page_item page-item-41">Rent</li>
<li class="page_item page-item-7">Sell</li>
<li class="page_item page-item-9 current_page_item">Valuations</li>
<li class="page_item page-item-15">Property Management</li>
<li class="page_item page-item-11">About Us</li>
<li class="page_item page-item-13">Contact Us</li>
</ul>
</div>
</nav>
I wan't the elements of my Bootstrap Navbar to stay in one line at every width.
I know this question has already been asked several times and I've tried various solutions, but no one worked for my case.
Here's my code:
#head-navbar {
width: 100%;
white-space: nowrap;
display: inline-block;
overflow: hidden;
}
.nav>li {
display: inline-block;
white-space: nowrap;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<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>
<nav class="navbar navbar-inverse navbar-fixed-top navbar-collapse" id="head-navbar">
<ul class="nav navbar-nav">
<li><a class="#" href="#">Home</a>
</li>
<li>Page 1
</li>
<li>Page 2
</li>
</ul>
<ul class="nav navbar-nav pull-right">
<li>DE
</li>
<li>IT
</li>
</ul>
</nav>
I want my Navbar to look like this on a smaller screen:
and not like this:
Just add display: inline-block; to your li and they will be displayed inline.
.nav>li {
display: inline-block;
}
Also if you want to display both ul in the same line you can do the same thing to the ul elements.Here you have a jsfiddle for both ul inline.
Also in firefox you will have a breakpoint in 768px so you should remove the white-space:nowrap
#head-navbar {
white-space: normal;
}
P.s : i don't know if it is a TYPO but you should use .pull-right instead of .navbar-right to float right an element
It's because of media queries, so on smaller screens it changes the style. Just add these:
.navbar-nav {
float: right;
margin: 0;
}
.navbar-nav > li {
float: right;
}
Add the below css, This should work for you.
#head-navbar {
width: 100%;
white-space: nowrap;
display: inline-block;
overflow: hidden;
}
.nav>li {
display: inline-block;
width:initial;
float:left;
white-space: nowrap;
}
.nav {
display: inline-block;
}
#media screen and (max-width:768px)
{
.nav.navbar-nav.pull-right { float:none !important; }
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<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>
<nav class="navbar navbar-inverse navbar-fixed-top navbar-collapse" id="head-navbar">
<ul class="nav navbar-nav">
<li><a class="#" href="#">Home</a>
</li>
<li>Page 1
</li>
<li>Page 2
</li>
</ul>
<ul class="nav navbar-nav pull-right">
<li>DE
</li>
<li>IT
</li>
</ul>
</nav>
.pull-right{
float:right;
}
#head-navbar {
width: 100%;
white-space: nowrap;
display: inline-block;
overflow: hidden;
}
.nav>li {
display: inline-block;
width:initial;
float:left;
white-space: nowrap;
}
.nav {
display: inline-block;
}
#media screen and (max-width:768px)
{
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<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>
<nav class="navbar navbar-inverse navbar-fixed-top navbar-collapse" id="head-navbar">
<ul class="nav navbar-nav">
<li><a class="#" href="#">Home</a>
</li>
<li>Page 1
</li>
<li>Page 2
</li>
</ul>
<ul class="nav navbar-nav pull-right">
<li>DE
</li>
<li>IT
</li>
</ul>
</nav>
im making new website based on bootstrap but everytime i click the button when navbar-collapsed it breaks down, also i would like to get the line where it is supposed to be (at the bottom of navbar) and collapse button in the middle of logo but i couldnt figure it out
HTML
<!-- Navigation -->
<nav class="navbar navbar-inverse 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">Zobrazit navigaci</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html"><img src="logo.png" width="50px" height="50px"></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 class="dropdown">
Škola <b class="caret"></b>
<ul class="dropdown-menu">
<li>
Výroční zprávy
</li>
<li>
Zaměstnanci
</li>
<li>
Historie
</li>
<li>
Kompletní informace
</li>
</ul>
</li>
<li class="dropdown">
Studium <b class="caret"></b>
<ul class="dropdown-menu">
<li>
Informační technologie
</li>
<li>
Agropodnikání
</li>
<li>
Obchodní akademie
</li>
<li>
Maturity
</li>
<li>
Formuláře
</li>
<li>
Třídy
</li>
</ul>
</li>
<li class="dropdown">
Jídelna <b class="caret"></b>
<ul class="dropdown-menu">
<li>
Jídelníček
</li>
<li>
Přihlašování obědů
</li>
</ul>
</li>
<li>
Domov mládeže
</li>
<li>
Galerie
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
CSS
#import url(https://fonts.googleapis.com/css?family=Open+Sans:400,600,700);
html,
body {
height: 100%;
font-family: 'Open Sans', sans-serif;
}
.navbar-fixed-top {
background-color: #5b5147;
border-color: transparent;
font-family: 'Open Sans', sans-serif;
font-weight: 700;
height: 100px;
text-transform: uppercase;
}
.navbar-inverse li {
padding-top: 20px;
}
.navbar-brand {
padding-top: 20px;
}
body {
padding-top: 100px; /* Required padding for .navbar-fixed-top. Remove if using .navbar-static-top. Change if height of navigation changes. */
}
.img-portfolio {
margin-bottom: 30px;
}
.img-hover:hover {
opacity: 0.8;
}
/* Home Page Carousel */
header.carousel {
height: 500px;
}
header.carousel .item,
header.carousel .item.active,
header.carousel .carousel-inner {
height: 100%;
}
header.carousel .fill {
width: 100%;
height: 100%;
background-position: center;
background-size: cover;
}
.center-block {
float:none;
display: inline-block;
font-family: 'Open Sans', sans-serif;
font-weight: 700;
text-align: center;
}
#ikonky{
color: #5c6465;
}
/* Footer Styles */
footer {
margin: 50px 0;
}
/* Responsive Styles */
#media(max-width:767px) {
.img-portfolio {
margin-bottom: 15px;
}
header.carousel .carousel {
height: 70%;
}
}
If you change this
.navbar-fixed-top {
height: 100px;
}
to this:
.navbar-fixed-top {
min-height: 100px;
}
The background color should show through on the menu when it's open.
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