Beginner question that I don't want to set in stone at the beginning of my home page before I move on to the basic content. I have a header conaining a fluid fluid container, a logo with a relative position from the left, and a menu I want relative to that logo, all on he same line. My CSS is as follows:
Top container:
.container-fluid {
background-color: #30302f;
height: 90px;
}
Menu items to the right of the logo
.dropdown-menu-right a {
color: #fff;
font-size: 16px;
font-weight: bold;
padding: 14px 10px;
text-transform: uppercase;
position: relative;
right: 160px;
}
Assure list stays on the same line
.container li{
display: inline-block;
}
Logo
.navbar-header a {
background-color: #30302f;
height: 69px;
weidth: 367px;
position: relative;
left: 120px;
}
So is there a correc method to make sure my menu always says on the same line and to the right of the logo, and maintains flexibility for changes/additions down the road as I add to the header? (social buttons, search bar, dropdown menu for phone media, etc...)?
If your goal was to do this using twitter bootstrap as your tags suggest then you really don't need to write all of that custom css because bootstrap comes with a of that functionality built in. For more details I'd checkout bootstrap's documentation.
Example
<div class="container">
<div class="row">
<nav class="navbar navbar-default">
<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="#">Logo</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">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>First Item</li>
<li>Second Item</li>
<li>Third Item</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Action</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</div>
</div>
Related
I'm developing a web application and I put in my application the bootstrap menu I would like when the application reaches the maximum width of max-width: 770px the menu would be the same as the menu that is in the normal width of the page.
But when giving the display none in the menu navbar-header it does not exit and the menu nav navbar-nav does not appear in the maximum width of the page of 770px
Menu in the normal width of the page
Menu at the maximum width of 770px
<div class="body-wrap" >
<nav class="navbar navbar-inverse" role="navigation" id="azul">
<div class="container-fluid">
<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>
<a class="navbar-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">
<div class="conteudo"><li>Pagina Principal</li></div>
<div class="conteudo"> <li>Contato</li></div>
<li class="dropdown">
<div class="conteudo"> Produtos <b class="caret"></b></div>
<ul class="dropdown-menu">
<li>Camisetas</li>
<li class="divider"></li>
<li>Calças</li>
<li class="divider"></li>
<li>Bermudas</li>
</ul>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
CSS
#media (max-width: 770px) {
body{
background-color: yellow;
}
.navbar-header{
display: none;
}
.nav .navbar-nav{
display: inline;
}
}
I am not sure If I got what you mean but if you want to disable navbar-collapse you can simply add this CSS:
.navbar-collapse.collapse {
display: block!important;
}
.navbar-nav>li, .navbar-nav {
float: left !important;
}
.navbar-nav.navbar-right:last-child {
margin-right: -15px !important;
}
.navbar-right {
float: right!important;
}
Fiddle here
You can simply remove:
the button in element with class "navbar-header"
remove css classes "collapse navbar-collapse"
In this way the button disappear and you don't need to add extra css rules.
The main bar will remain visible with all widths.
Can't quite seem to wrap my head around a bootstrap nav having elements on bottom and top of navbar, while still utilizing the collapsable navbar.
Here is what I've tried: Fiddle
As you can see, I was able to achieve the text on top and bottom of navbar (while still using the collapsable navbar feature), but when you look at it in mobile (as in, when the menu is collapsed and you click on the hamburger logo), it's completely messed up.
So this has me wondering if perhaps I'm not approaching this the right way?
Here is the CSS:
#mainNavBarTop {
position: absolute;
margin-top: -10px;
top: 0;
left: 0;
}
#mainNavBarBottom {
position: absolute;
margin-bottom: -10px;
bottom: 0;
left: 0;
}
and HTML
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header"><button class="navbar-toggle collapsed" type="button" 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><img src="" /></div>
<div class="navbar-collapse collapse" id="navbar">
<ul class="nav navbar-nav" id="mainNavBarBottom">
<li class="bottom">About</li>
<li class="bottom">Contact</li>
</ul>
<ul class="nav navbar-nav" id="mainNavBarTop">
<li class="bottom">About</li>
<li class="bottom">Contact</li>
</ul>
<form class="navbar-form navbar-right" role="search">
<div class="form-group"><input class="form-control" type="text" placeholder="Search"/></div>
<button class="btn btn-default" type="submit">Submit</button>
</form>
</div>
</div>
</nav>
If you want the navigation links to display over multiple lines on a desktop view, all you have to do is specify a width for the navbar that accommodates for the image, and also add enough items to the dropdown so that they overflow.
Optionally, you can have the links pressed up against the right rather than the left by adding float: right to the li elements of the navbar. Note that this will reverse the order of the items in the list, so you may wish to list the links in reverse order in the HTML itself if you opt for this.
You can see this by expanding the snippet below, or by viewing the JSFiddle here. The links all stay directly below one another in the collapsed menu, though occupy two lines in the desktop view. Expanding the JSFiddle to the maximum width shows that the links will revert back to a single line when there is enough space to contain them.
#media (min-width: 768px) {
.navbar-nav.pull-right {
width: calc(100% - 120px); /* 100% - image width */
}
.navbar-nav>li {
float: right; /* Optionally align items to the right */
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-default">
<div class="container">
<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>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"><img class="img-responsive" src="http://placehold.it/120x30" width="120px;" /></a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav pull-right">
<li>Saved searches</li>
<li>Settings</li>
<li>About</li>
<li>Sign In</li>
<li>Another Link</li>
<li>Another Link</li>
<li>Another Link</li>
<li>Another Link</li>
</ul>
</div>
</div>
</nav>
Hope this helps! :)
I need to set the height of the logo same as the header. Though I set the height of the logo as 100% it doesn't take the height of the header. I am not sure how to set the height of the logo as the header height. Here is my code
app.css
body {
font-family: 'Open Sans', sans-serif;
border-top:none;
}
.navbar {
margin-bottom: 0px;
padding: 10px 15px;
}
.navbar img {
width : 100%;
height : 100%;
}
Master page
You can see the reference of the logo in the header element
<header>
<nav class="navbar navbar-default">
<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" 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>
<img src="~/Images/NGSR-logo.jpg" />
</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>Requests</li>
<li>Activities</li>
<li>Reports</li>
<li>Admin</li>
<li class="dropdown">
Country <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>Separated link</li>
</ul>
</li>
<li>Save View</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</header>
Header view
Try to set a max-width for the logo image:
.navbar-header img{
max-width:280px;
}
and then set padding to zero for the navbar:
.navbar{
padding:0;
}
For my example I picked a random logo from google, however that should give you the general idea!
Fiddle here: https://jsfiddle.net/captain_theo/f1a5bda1/
I am trying to move the inline menu next to the burger bar on the right hand side of the page. I am using bootsrtap, the image below is how I want the menu to appear, is it possible? So when the user clicks the burger bar the menu comes out on the left next to the burger bar. At the moment it drops down below the menu bar. Here is the bootsnip http://bootsnipp.com/user/snippets/M3gdX example.
Below is my code (HTML):
<nav class="navbar navbar-inverse navbar-fixed-top">
<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="/"><img id="header-image">Logo</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<div class="menu-bar"></div>
<div class="menu-bar"></div>
<div class="menu-bar"></div>
</a>
<ul class="dropdown-menu" id="number-list">
<ul class="list-inline">
<li class="active">Home</li>
<li>Blog</li>
<li>Gallery</li>
<li>About</li>
<li>Contact</li>
</ul>
</ul>
</li>
</ul>
</div>
</nav>
The CSS code:
.menu-bar {
width: 22px;
height: 2px;
background-color: white;
margin: 6px ;
border-radius: 1px;
}
#number-list.dropdown-menu {
width: 300px;
}
.dropdwon-toggle {
margin-right: 10px;
}
I am new to this and can't seem to find anywhere an example of a drop left menu that doesn't slide out the page or come over the page.
You can set float: left to your li elements to make it horizontal in one line.
<ul class="list-inline lefties">
<li class="active lefties-item">
Home
</li>
<li class="lefties-item">
Blog
</li>
<li class="lefties-item">
Gallery
</li>
<li class="lefties-item">
About
</li>
<li class="lefties-item">
Contact
</li>
</ul>
CSS
ul.lefties:after {
clear: both;
display: block;
content: "";
}
.lefties-item {
float: left;
}
I need to center some content in bootstrap navbar
trying and copy from other post but isn't working...
Bootstrap: center some navbar items
JSFiddle example
my code:
CSS:
.navbar-nav ul > .center-nav {
display: inline-block !important;
left: 0 !important;
right: 0 !important;
text-align:center !important;
width:70% !important;
}
.navbar-nav > .center-nav ul, .navbar-nav > .center-nav li a {
display: inline !important;
float: none !important;
line-height: 40px !important;
}
HTML:
<nav class="navbar navbar-inverse">
<div class="container">
<!-- 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="#navbar-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>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Left <span class="sr-only">(current)</span></li>
<li>Left</li>
</ul>
<ul class="nav navbar-nav center-nav">
<li>center</li>
<li>center</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>right</li>
<li>right</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container -->
</nav>
Place your center navigation after the right in your markup. Remove floats, display the center nav items as inline-block and align them centrally.
Note that since this changes the order of your markup, a mobile device will list the right navigation items before the centre ones.
HTML
<nav class="navbar navbar-inverse">
<div class="container">
<!-- 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="#navbar-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>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Left <span class="sr-only">(current)</span></li>
<li>Left</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>right</li>
<li>right</li>
</ul>
<ul class="nav navbar-nav center-nav">
<li>center</li>
<li>center</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
CSS
#media screen and (min-width: 768px){
.center-nav{
float: none;
text-align: center;
}
.center-nav > li{
float: none;
display: inline-block;
}
}
JSFiddle
If I understand your question correctly you are wanting to center the li's with the class name center-nav.
Add the following to your css if that's what you are looking for:
.center-nav {
text-align: center;
}
You're using this Bootstrap class:
<ul class="nav navbar-nav navbar-right">
<li>right</li>
<li>right</li>
</ul>
navbar-right
Which clearly floats that part of the navbar to the right.
You should try to look into the classes you are using, especially if taken from a framework, and ESPECIALLY if taken directly from a template.
The !important will have no effect if your custom CSS comes before the Bootstrap CSS, which is probably what's happening.