I am designing navigation menu, but I couldn't adjust width according to window. I want to make menu width 100%, as we change the window size, the menu still covers from left corner to right corner.
The following code I am using for designing navigation:
HTML
<nav class="span9">
<!-- Menu-->
<ul id="menu" class="sf-menu">
<li class="">HOME</li>
<li>ABOUT</li>
<li>SERVICES</li>
<li class="">WORK</li>
<li class="">BLOG</li>
<li class="">FEATURES</li>
<li>CONTACT</li>
</ul>
<!-- End Menu-->
</nav>
CSS
.sf-menu {
margin: 0;
padding-top: 7px;
}
.sf-menu > li {
position: relative;
float: left;
list-style: none;
line-height: 20px;
margin: 0 40px 0 0;
}
.sf-menu > li > a {
text-decoration: none;
display: block;
font-size: 17px;
}
Here the JSFIDDLE LINK
Setting a min-width to parent element will solve this issue. But still it might create a scroll or if you set overflow to hidden it will crop some text out.
To prevent this scrolling / cropping you can use javascript or css3 media query. I prefer media queries over javascript solution. But you may need css3 supported browser.
Here is the modified fiddle with css media query
.sf-menu {
margin: 0;
padding-top:7px;}
.sf-menu > li {
position: relative;
float: left;
list-style: none;
line-height: 20px;
margin: 0 40px 0 0;
}
.sf-menu > li > a {
text-decoration: none;
display: block;
font-size: 17px;
}
#media all and (min-width:500px){
.sf-menu > li {
position: relative;
float: left;
list-style: none;
line-height: 14px;
margin: 0 30px 0 0;
}
.sf-menu > li > a {
text-decoration: none;
display: block;
font-size: 14px;
}
}
If you want to make width 100% for navigation menu bar. Try the following CSS for your HTML.
CSS
nav {
display: table;
width: 100%;
border-collapse: collapse;
border: none;
}
nav ul {
display: table-row;
}
nav li {
display: table-cell;
margin: 0;
}
Here the JSFIDDLE LINK
Related
I have container with width of 100% and inside of it i have a menu. When i want to apply background color to menu container nothing happens, its killing me i cant figure it out.
It works when i apply display inline-block on it but why would i need to display it differently its only a container 100% width
menu {
width: 100%;
background: #333;
}
.menu > ul {
width: 100%;
list-style: none;
padding: 0;
margin: 0;
}
.menu > ul > li {
float: left;
background: #e9e9e9;
display: inline-block;
padding: 0;
margin: 0;
}
.menu > ul > li > a {
text-decoration: none;
padding: 1.5em 3em;
display: inline-block;
outline: 0 none;
}
.menu > ul > li > ul {
display: none;
background: #333;
padding: 20px 30px;
position: absolute;
width: 100%;
z-index: 99;
left: 0;
color: #fff;
margin: 0;
}
.menu > ul > li:hover > ul {
display: block;
}
and this is my html
<div class="menu">
<ul>
<li>Home
<ul>
This is also mega menu
</ul>
</li>
<li>Who are we?
<ul>
This is mega menu
</ul>
</li>
<li>Services</li>
<li>Contact</li>
</ul>
</div>
also when i try to float my UL to right nothing happens. Did i mess up my display: in any element ?
That's because your LI elements are floated. In this case, container will have a height of 0 pixels. You need to clear the container (.menu) first. There's also a slight error on the MENU element - you forgot to add the DOT .menu (to be a class, as in your html code).
To clear floats, read this > https://css-tricks.com/the-how-and-why-of-clearing-floats/
.menu:before,
.menu:after {
content: "";
display: table;
}
.menu:after {
clear: both;
}
A working scenario, on jsfiddle, here > jsfiddle.net/4pgvzxs0/
I am creating a website using a mobile-first approach. I am currently styling the navigation bar, which is comprised of a ul with five li elements and an a element within each li. For the mobile layout, I want the navigation to be perfectly centered. The nav element and the li elements appear to be perfectly centered; however, the a elements are not centered within each li... They are skewed toward the right. How can I correct this?
Here is my HTML:
<nav>
<ul>
<li>Home</li>
<li>Programs</li>
<li>About Us</li>
<li>Why</li>
<li>Contact Us</li>
</ul>
</nav>
And here is my CSS:
nav {
width: 15%;
margin: 0 auto;
padding-top: 0.5em;
}
nav ul {
list-style-type: none;
}
nav li {
max-width: 100%;
margin: 1em;
text-align: center;
border-radius: 10px;
}
nav a {
display: inline-block;
width: 100%;
margin: 0 auto;
padding: 0.5em;
color: inherit;
text-decoration: none;
}
And here is an image of what the nav currently looks like in the browser (Chrome):
Set the li's margin and padding to 0;
Add the following inline or in an external style sheet to nav a
margin: 0px;
text-align: center;
Try this :
nav ul {
display: block;
overflow: hidden;
padding: 0px;
list-style-type: none;
}
nav a {
display: block;
width: 100%;
margin: 0 auto;
color: inherit;
text-decoration: none;
overflow: hidden;
}
And use max-width on the tag not simple width
Having some trouble with my nav, i'm trying to create a dropdown menu when you hover over the "Match" link. every time I hover the mouse over the link, list will stay underneath said link and disrupt how the navigation bar looks. Any helps will be much appreciated
HTML
<nav>
<span class= "navbar-button"></span>
<ul class="navbar">
<li>Home</li>
<li>Gallery</li>
<li>Match
<ul>
<li>City</li>
<li>Coastal</li>
<li>Rural</li>
</ul>
</li>
</ul>
</nav>
CSS
body{
padding: 0;
margin: 0;
font-family: 'main';
}
.navbar {
list-style: none;
background-color: #333;
color: #fff;
margin: 0;
text-align: center;
}
.navbar > li {
display: inline-block;
padding: 1.3% 2%;
}
.navbar > li:hover {
background-color: #585858;
}
.navbar > li > a{
text-decoration: none;
font-size: 30px;
color: #fff;
}
.navbar li ul {
display: none;
}
.navbar li:hover ul{
display: block;
}
you need to use absolute positioning to break it out of the container so it won't disrupt the rest of the elements:
.navbar li ul {
position: absolute;
display: none;
background-color: #333;
margin: 0;
text-align: center;
padding: 20px;
}
Be sure to set its parent to position: relative or the body will become its container:
.navbar > li {
position: relative;
display: inline-block;
padding: 1.3% 2%;
}
JSFIDDLE
Add position absolute to: .navbar li ul
I'm trying to code a drop down menu where the hovered over list item displays a list of links horizontally.
What is happening with my code right now is that all the links are right on top of each other, and I can't for the life of me figure out how to fix them.
I've tried adding height and width, and then adjusting the padding, margins, you name it. Somehow using display: inline; hasn't been enough to accomplish this.
If anyone could help me out with this, that would be much appreciated.
<header>
<nav>
<div class="container">
<div class="wrapper">
<h1><img alt="logo" src="logosmall.jpg" />
<strong>New Ideas</strong>Education
</h1>
<ul>
<li>about us</li>
<li>teachers
<ul>
<li>Literature</li>
<li>International</li>
<li>Staff</li>
</ul>
</li>
<li>lessons</li>
<li>reviews</li>
</ul>
</div>
</div>
</nav>
</header>
And the CSS:
ul {
list-style-type: none;
display: inline;
}
header nav {
}
header nav ul {
background: #fff;
padding: 2px 0 0 0;
list-style: none;
position: relative;
float: right;
display: inline;
}
header nav ul:after {
content: "";
clear: both;
display: block;
}
header nav ul ul:after {
content: "";
clear: both;
display: inline;
margin: 0 20px 0 0;
}
header nav ul li {
float: left;
padding: 10px 20px;
text-transform: uppercase;
color: #757575;
display: inline;
}
header nav ul li:hover > ul {
color: #06cbe2;
display: inline-table;
padding: 5px 60px;
margin: 0 20px 0 0;
float: left;
position: absolute;
}
header nav ul li:hover a {
color: #06cbe2;
}
header nav ul li a {
display: inline;
color: #757575;
text-decoration: none;
text-transform: uppercase;
}
header nav ul ul {
background: #fff;
padding: 0px 20px 0px 0px;
list-style: none;
position: absolute;
float: left;
display: none;
}
header nav ul ul li {
position: absolute;
display: inline;
margin: 0 30px 0 0;
color: #757575;
text-transform: uppercase;
padding: 10px -60px;
font-size: 10pt;
}
header nav ul ul li a {
padding: 10px -60px;
color: #757575;
text-decoration: none;
text-transform: uppercase;
display: inline-table;
font-size: 6pt;
}
header nav ul ul li a:hover a {
color: #06cbe2;
}
firstly make sure where and how you wanted to display the controls, if you saying all controls are sitting on over the other then all those positions have same value, the css have same values for almost all ID and Class, I can give you and example to fix and it might help you to fix your problem
Imagine you need two dropdown list one is on left and one is on right side then do this
NOTE(its just an example)
<div id=Main>
<div id=left></div>
<div id=right></div>
</div>
now provide height and width as 100% to "Main", then provide css for "left" as below
#left
{
height:100%;
width:50%;
border:1px solid black;
background-color: #ffffff;
float:left;
}
#right
{
height:100%;
margin-left:50%;
border:1px solid black;
background-color: #ffffff;
float:right;
}
and inside to those div's use your dropdown controls or any controls and modify the width if you want, Let me know if it works, will help you
I have the following nav bar:
<header>
<h1>Blah blah</h1>
<nav>
<ul>
<li>foo
<li>bar
<li>baz
<li>zop
</ul>
</nav>
</header>
How do I center it perfectly? I also have the following css:
header {
background-color: #a4c9f3;
text-align: center;
}
header nav {
/* guessing this width works, but I don't want to do it manually */
/* width: 24em; */
display: inline-block;
}
header nav ul li {
float: left;
padding: 0 0 0 6px;
list-style: none;
}
header nav ul li a {
padding: 9px 22px 4px 16px;
background-color: #83b2e6;
}
As you can see in this jsfiddle, it's almost centered.
Change your ul to width: 100% and center the text, set your li as display: inline.
And display your anchors as inline-blocks:
CSS:
header {
background-color: #a4c9f3;
text-align: center;
}
header nav ul {
width: 100%;
text-align: center;
list-style: none;
margin: 0;
padding: 0;
}
header nav ul li {
display: inline;
}
header nav ul li a {
padding: 9px 22px 4px 16px;
display: inline-block;
background-color: #83b2e6;
}
updated Fiddle
You just need to remove the default padding/margin from ul and li elements, you can use a reset css stylesheet like Eric Meyer's reset or something like this:
header nav ul, header nav ul li{
margin: 0;
padding: 0;
}
Demo working: http://jsfiddle.net/YkZqj/13/
CSS Reset: http://meyerweb.com/eric/tools/css/reset/