I have a set of links for my website's navigation. When the window reaches certain widths, I have a few media queries that help display the navigation properly. Everything is working fine except for the fact that the links are reversed when the window resizes. Why is this happening?
JSFiddle: http://jsfiddle.net/snpx63mx/
Markup
<header>
<h1><strong>Henry</strong><span id="notbold">+Applications</span></h1>
<nav>
<ul>
<li id="contact"><div id="contactanimation">Contact</div></li>
<li id="project"><div id="projectanimation">Project</div></li>
<li id="me"><div id="meanimation">Me</div></li>
</ul>
</nav>
</header>
CSS
header h1
{
font-size: 40px;
float: left;
font-weight: 100;
}
header nav
{
float: right;
}
header nav ul
{
list-style-type: none;
margin: 0;
vertical-align: middle;
line-height: normal;
float: right;
z-index: 999;
position: relative; /* add this */
}
header nav ul li
{
line-height: 15px;
float: right;
padding: 45px;
font-size: 22px;
font-weight: 100;
text-align: center;
}
header nav ul li a
{
color: black;
text-decoration: none;
}
#media screen and (max-width: 1160px) {
header h1
{
float: none;
text-align: center;
font-size: 36px;
}
header nav
{
width: 100%;
margin-right: 20px;
}
header nav ul
{
float: none;
text-align: center;
}
header nav ul li
{
width: 100%;
box-sizing: border-box;
text-align: center;
padding: 25px;
}
}
JSFIDDLE: http://jsfiddle.net/snpx63mx/2/
You have a float right on your li tags. This means your bottom li is going to be on the left side when in a wider breakpoint. When it becomes a smaller width, the li stacks on top of each other and it is showing from top top bottom in the order that the lis are listed in html. If you ordered the list items like this :
<li id="me"><div id="meanimation">Me</div></li>
<li id="project"><div id="projectanimation">Project</div></li>
<li id="contact"><div id="contactanimation">Contact</div></li>
and then modified your css to float them left, you would have the same order in both sizes.
It's what I said in comment, change float: right to float: left:
header nav ul li
{
float: left;
}
FIDDLE: https://jsfiddle.net/lmgonzalves/snpx63mx/1/
Related
I'm trying to position a website title (div) to the left of my navigation bar. I thought of creating another
<li><a>
element and put that as the website title, but I don't want it to have some of the propertise like font family and hover.
This is currently what I have:
and this is what I would like to achieve:
So in summary I would like to add a div to put my website title to the left of the navigation buttons.
#nav {
width: 100%;
height: 50px;
float: left;
margin: 0 0 1em 0;
padding: 0;
background-color: #3D3D3D;
}
#nav ul {
list-style: none;
width: 1000px;
margin: 0 auto;
padding: 0;
}
#nav li {
float: left;
}
#nav li a {
display: block;
padding: 8px 15px;
height: 50px;
text-decoration: none;
font-family: 'Quicksand', sans-serif;
font-size: 20px;
color: #FFFFFF;
}
#nav li a:hover {
color: #FF4343;
background-color: #FFFFFF;
}
<div id="nav">
<ul>
<li>Prev 1
</li>
<li>Prev 1
</li>
<li>Prev 1
</li>
</ul>
</div>
I think you've got too much in your CSS. Just changing the ul to:
display:inline;
and then setting some line-height does the trick.
See this fiddle: https://jsfiddle.net/x20mkx1n/5/ where I've taken out much of your CSS.
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
I have a menu bar that isn't stretching the entire length of the div it is in. I have 6 main menu options and I want these to stretch across the entire div tag they are in and not just take up the exact spacing of the words. I've tried to set the div and the menu elements to 100% width, but nothing is working. My code is listed below.
CSS
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
li {
float: left;
}
a:link,a:visited {
display: block;
width: 100%;
font-weight: bold;
color: #FFFFFF;
background-color: #98bf21;
text-align: center;
padding: 4px;
text-decoration: none;
text-transform: uppercase;
}
a:hover,a:active {
background-color: #7A991A;
}
.testmenu {
width: 100%;
}
HTML
<div class="testmenu">
<ul>
<li>Home</li>
<li>News</li>
<li>Contact</li>
<li>About</li>
</ul>
</div>
Here's an edit I made from your code:
http://jsfiddle.net/fatgamer85/grLkE/
I've added few classes to the list and list items.
I've made the list width 100% to fill the area (I'm assuming menu bar?), then removed the float from list items, made them inline, and added padding to the items
.menu-item{
display: inline-block;
padding: 2%;
}
and this is how it looks:
http://jsfiddle.net/fatgamer85/grLkE/embedded/result/
Hope this helps.
Change
li{float:left;}
to
li{display:inline-block;width:25%;margin:0;padding:0;}
Fiddle here.
you can give the UL a width of 100%, and then the li each a width of 25%
the css that you have compiles to give the testmenu a 100% width, and then YOU have to explicitly tell the UL and LI how much width they should have.
ul {
list-style-type: none;
overflow: hidden;
display:table-row;
}
li {
display:table-cell;
border:1px solid black;
}
a:link,a:visited {
display: block;
width: 100%;
font-weight: bold;
color: #FFFFFF;
background-color: #98bf21;
text-align: center;
padding: 4px;
text-decoration: none;
text-transform: uppercase;
}
a:hover,a:active {
background-color: #7A991A;
}
.testmenu {
width: 100%;
display:table;
table-layout:auto;
}
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
i'm trying to center my nav in a responsive design. When the viewport is stretched to about 900px, the 3 nav titles look off center to the rest of the content on the page. Does anyone of a way to fix this?
HTML:
<header>
<div id="logo">
<a href="#">
<img src="images/logo_55x73.png" alt="StudioMed" />
</a>
</div>
<nav>
<ul>
<li>Work</li>
<li>Profile</li>
<li>Journal</li>
</ul>
</nav>
</header>
CSS:
header {
background-color: #fff;
border-bottom: solid 1px #e4e4e4;
}
#logo {
padding: 2.3em 1.1em 1.7em 1.1em;
text-align: center;
}
nav {
display: block;
}
nav ul {
text-align: center;
}
nav li {
font-size: 0.95em;
display: inline;
text-transform: uppercase;
letter-spacing: 0.06em;
padding: 0 1%;
}
nav a {
text-decoration: none;
display: inline-block;
width: 122px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#media only screen and (min-width:767px) {
header {
float: left;
overflow: auto;
width: 100%;
}
#logo {
float: left;
width: 10%;
}
nav ul li {
float: left;
width: 22.1354166666667%;
margin-top: 50px;
font-size: 1em;
}
}
Thanks in advance
Your UL may have some default padding on its left.
Try adding this to your CSS:
nav ul {
...
padding: 0px;
}
http://jsfiddle.net/cxNZZ/
EDIT:
The padding issue above did not seem to solve your issue.Here is a different theory:
Each LI is the same width, but the text inside each LI may not be. That could cause the menu to appear to be off center, even though the LIs are centered.
http://jsfiddle.net/d6hRg/1/
http://jsfiddle.net/d6hRg/2/
See what I mean?