I want to add image/logo inside Nav Bar.
How to make sure that the nav bar height always fit the image and the other elements stay in center.
I am currently using nav bar with Nav-wrapper class from materialize framework.
I have tried to add min-height to nav-wrapper but that make the other elements slide off from the center.
Code pen link
Try like this its working for me
step-01 Im added this class navbar-brand
step-02 Im added this CSS
.navbar-brand {
padding: 0px;
}
.navbar-brand>img {
height: 64px;
padding: 0px;
width: auto;
}
.black {
background-color: #111 !important;
}
nav
<nav>
<div class="nav-wrapper black">
<div class="container">
<img src="http://www.becomeanengagedemployee.com/wp-content/uploads/2012/03/flow-200x75.jpg">
<ul id="Nav2" class="right hide-on-med-and-down">
<li><i class="material-icons">search</i></li>
<li><i class="material-icons right">refresh</i>Link with Left Icon</li>
<li><a class="waves-effect waves-light btn">Button</a></li>
</ul>
</div>
</div>
</nav>
Codepen
Related
I want to centralize the tab's items and the style to be the same, but I cannot modify my css currently.
I want the tab element to takes 100% width(to be stretched) and the li elements to be at the center of the tab element.
<div class="row">
<div class="col-lg-12 centered-tabs">
<ul class="nav nav-tabs">
<li class="active">Women</li>
<li>Men</li>
</ul>
</div>
</div>
Thanks,
B.
The navbar links are set to float: left by default, you need to reset it to float: none so that text-align: center will have the necessary effect.
Also display: block on the list elements make them stack vertically. Set them to display: inline-block
.centered-tabs {
text-align: center;
}
.centered-tabs .nav-tabs > li {
float: none !important; /* Avoid !important, added for SO snippet priority */
}
.centered-tabs .nav > li {
display: inline-block !important;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet" />
<div class="row">
<div class="col-lg-12 centered-tabs">
<ul class="nav nav-tabs">
<li class="active">Women
</li>
<li>Men
</li>
</ul>
</div>
</div>
I am trying to use the Bootstrap dropdown on a centered image, but I can't get the dropdown to be centered as well.
Fiddle with my current code
<div class="row">
<div class="col-md-12 profile-picture text-center">
<div class="dropdown col-md-3">
<img src="http://i.imgur.com/9qfJGrz.jpg" alt="" class="profile-photo img-thumbnail" data-toggle="dropdown" />
<ul class="dropdown-menu" role="menu" aria-labelledby="Change Settings">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Upload new picture</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Remove</a></li>
</ul>
</div>
</div>
</div>
As you can see the dropdown gets aligned to the left, is there a way to get it to be centered underneath the image? It's in a col-md-3 so try resizing the screen as well.
Add display:inline-block to your dropdown.
.dropdown
{
display: inline-block;
}
Here's a fiddle.
position: absolute, left:0px and float:left are the causes.
Fix:
.profile-picture .dropdown-menu {
position: relative;
clear: both;
float: none;
}
The width will stick the the width of the column :)
If you don't like that, use these, or remove the column setup:
width: 170px;
margin: 0 auto;
See updated fiddle
This would be one solution, which will work responsively as long as you declare a width for the menu:
.profile-photo {
width: 170px;
height: 170px;
margin: 0 auto;
display: block;
}
.dropdown-menu {
margin-left: -85px;
width: 170px;
left: 50%;
position: absolute;
}
I removed your col-md-3 as you are just positioning the menu halfway across the col-md-12 with this method.
`<ul id="main-nav">
<li>
Menu item
<div class="sub-nav">
<p>Anything</p>
</div>
</li>
<li>
Menu item
<div class="sub-nav" style="left: -80px;">
<p>Anything</p>
</div>
</li>
<li>
Menu item
<div class="sub-nav" style="left: -160px;">
<p>Anything</p>
</div>
</li>
<li>
Menu item
<div class="sub-nav" style="left: -240px;">
<p>Anything</p>
</div>
</li>
<li>
Menu item
<div class="sub-nav" style="left: -320px;">
<p>Anything</p>
</div>
</li>
`
I want to be able to put content into the div (Links, Images, Text, etc). I am trying to make the div box the same size as the navigation bar its self specifically 1050px in width (I want the navigation bar and div box to be 1050px in width). When a user hovers over a link in the navigation bar I want the div box to appear with all its content inside.
this is something like it: http://jsfiddle.net/ELyQW/2/ ~ (But if you look closely you can see the box moves on every new link which I do not want to happen.)
Look at the navigation bar on this website for similar reference. pacsun.
Thank You SO much for your help!
And if you do help me create a new bar I strongly recommend you do not use the jsfiddle I posted, but if you have to go for it!
Thank you once again!
Yay success!
http://jsfiddle.net/hjZz9/1/
<div id="main-menu-container">
<ul id="main-menu">
<li>
Main menu
<div class="sub-menu">
Testing 123
</div>
</li>
<li>
Main menu
<div class="sub-menu">
Testing 123
</div>
</li>
<li>
Main menu
<div class="sub-menu">
Testing 123
</div>
</li>
<li>
Main menu
<div class="sub-menu">
Testing 123
</div>
</li>
</ul>
</div>
#main-menu-container {
position: relative;
}
#main-menu {
margin: 0; padding: 0;
list-style: none;
}
#main-menu li {
float: left;
margin-right: 15px;
}
#main-menu li:hover .sub-menu {
display: block;
}
.sub-menu {
display: none;
position: absolute;
left: 0; right: 0;
padding: 10px;
background-color: #eee;
}
Edit: I've added right: 0; to .sub-menu just so it stretches from end to end, you can change this to your own preference of course.
You could try position fixed instead of absolute. Then left position both the div and ul correctly and you will achieve it. Here is a sample
.sub-nav {display: none; position: fixed; left: 40px; width: 400px; z-index: 999; background: #f2f2f2;}
I am trying to put a solid white background behind this navagation bar so when it scrolls it does not show whats behind it.
CodePen Example of Bar | http://codepen.io/enoughsev/pen/vAJCo
<div id="header">
<img id="nav_img" src="Graphics/nav_img.svg" height="122" width="201" alt="Lanier Canoe and Kayak Club logo"/>
<div id="nav_bar" style:"color:#FFF;">
<header id="title">Lanier Canoe and Kayak Club</header>
<ul id="nav_words">
<li class="selected items">Home</li>
<li class="items">About Us</li>
<li class="items">Programs</li>
<li class="items">Rentals</li>
<li class="items">Contact Us</li>
</ul>
</div>
</div>
In theory I should be able to just put
#header {
width: 100%;
height: 150px;
padding-bottom:20px;
background-color:#FFFFFF;
border:
z-index: 3;
color:white;
}
and it work properly correct?
Give fixed position to header :- DEMO
#header {
position: fixed;
}
Since there is position:fixed currety navbar is not part of #header. So HTML structure should be altered a bit.
Add position:fixed to #header instead of nav bar
Add a paernt div for body content part and give top margin (margin top = header
height)
DEMO
I am currently working with a bottom navigation bar for a test site. The problem is that the navigation bar does not center properly. I have added the .left attribute to keep each block list beside each other. How can I get this bottom navigation bar to center automatically(no matter the amount of lists added)? Example
CSS related to bottom navigation
<style>
.bottomnavControls {
padding-top:10px;
padding-bottom:10px;
padding-right:0;
text-decoration:none;
list-style:none;
}
#footer {
position: absolute;
width: 100%;
bottom: 0;
background: #7a7a7a;
border-bottom: 15px solid #000;
}
.left {
float: left;
}
.right {
float: right;
}
</style>
HTML
<div id="footer">
<div class="bottomNav">
<ul class="bottomnavControls left">
<li style="padding-bottom:5px;"><b>Home</b></li>
<li>Login</li>
</ul>
<ul class="bottomnavControls left">
<li style="padding-bottom:5px;"><b>Category</b></li>
<li>Games</li>
</ul>
<ul class="bottomnavControls left">
<li style="padding-bottom:5px;"><b>About</b></li>
<li>Who We Are</li>
</ul>
<ul class="bottomnavControls left">
<li style="padding-bottom:5px;"><b>Links</b></li>
<li>Google</li>
</ul>
<ul class="bottomnavControls left">
<li style="padding-bottom:5px;"><b>Other Stuff</b></li>
<li>Stuff</li>
</ul>
</div>
</div>
My current Bottom navigation:
My desired outcome:
Instead of float, you should use display: inline-block here. This way, you can easily center them by putting text-align: center on the container.
.bottomNav { text-align: center; }
.bottomnavControls { display: inline-block; }
and remove left class.
Note: display: inline-block works fine in modern browsers, but it needs a hack in IE7.