I have a navigation with ten items inside it and I want to maximize its length and set the spaces between the items equally.
So far, this is what I've done. But it only looks nice if the menu items' lengths are equal, but mine isn't. Ideas, anyone? Thanks in advance.
<nav class="menu">
<ul>
<li>Home</li>
<li>About Us</li>
<!-- eight more menu items -->
</ul>
</nav>
And here's my stylesheet.
.menu {
width: 100%;
}
.menu li {
display: inline-block;
width: 10%; /* since I have 10 items */
text-align: center;
}
View this codepen.
You will need to float your li items left.
CSS:
.menu {
width: 100%;
}
.menu ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.menu ul li {
width: 8%;
text-align: center;
margin: 0% 1%;
float: left;
padding: 0;
}
It's important to keep track of your total width (100%). Each item should be 10% (since you are having 10 items) in total. This means when you want a margin of 1% on the left and on the right side, your li item should have a width of 8%.
Your total width should always be 100%. Otherwise your user will be able to scroll horizontally.
add margin for li in css file.
.menu li {
display: inline-block;
margin-left:1%;
width: 6%; /* since I have 10 items */
text-align: center;
}
Or use #media rule is used to define different style rules for different media types/devices
Use the modern flexbox technique for the solution. No need to set any width or margin.
Check the browser compatibility table: Flexbox
Use the CSS Prefixer to support some of the older browsers:
* {
margin: 0;
padding: 0;
}
.menu ul {
display: flex;
flex-direction: row nowrap;
justify-content: space-around;
}
.menu li {
list-style: none;
}
<nav class="menu">
<ul>
<li>Home</li>
<li>About Us</li>
<li>Home</li>
<li>About Us</li>
<li>Home</li>
<li>About Us</li>
<li>Home</li>
<li>About Us</li>
<li>Home</li>
<li>About Us</li>
</ul>
</nav>
you could have ato add float css rule to the ul element.
.menu ul{padding:0px;}
.menu {
width: 100%;
}
.menu ul li {
float:left;
width: 10%; /* since I have 10 items */
text-align: center;
}
try with above code
Related
I am trying to vertically align the tex of a nav bar that is in display: flex;.
I have used the following code yet the text is still aligned to the top of the nav container and won't move down to the center.
Could you please help me understand what I have done wrong? I have tried moving align-items: center; to the nav{} and nav ul li{} in CSS but it doesn't change anything.
nav {
background-color: aquamarine;
width: 100%;
height: 70px;
}
nav ul {
list-style: none;
display: flex;
justify-content: space-around;
align-items: center;
}
nav ul li {
font-size: 3rem;
}
<nav>
<ul>
<li>About Us</li>
<li>Event Schedule</li>
<li>Contact Us</li>
</ul>
</nav>
Just add height: 100% to nav ul
nav {
background-color: aquamarine;
width: 100%;
height: 70px;
}
nav ul {
list-style: none;
display: flex;
justify-content: space-around;
align-items: center;
height: 100%;
}
nav ul li {
font-size: 3rem;
}
<nav>
<ul>
<li>About Us</li>
<li>Event Schedule</li>
<li>Contact Us</li>
</ul>
</nav>
The items are vertically aligned, or at least they try to be, but you have set the font size so large that they break out of your fixed-height container. Possible solutions:
Don't set the font-size.
Don't fix the height of the parent element.
So i was looking at https://youtu.be/8gNrZ4lAnAw?t=8831 to learn how to do repsonsive sites, at step 2:27:11 he creates the navigation by
Edit:
Forgot to mention, it's mobile first, so the below css is for width > 1024, the mobile css is this:
nav ul {
position: fixed;
width: 60%;
top: 0;
right: 0;
text-align: left;
background-color: rgba(36,41,44);
height: 100%;
z-index: 7;
padding-top: 3em;
}
1024 css
nav ul {
/* NOTE position fixed to reset */
position: inherit;
width: auto;
background: none;
display: flex;
padding-top: 0;
}
nav ul li {
float: left;
}
I don't understand why flex on the ul didn't work, that you still need to float the list item? If anyone knows what's going on that would be really helpful.
edit: html
<nav>
<a href="#" class="hide-desktop">
<img src="images/ham.svg" alt="toggle menu" class="menu" id="menu" />
</a>
<ul class="show-desktop hide-mobile">
<li id="exitMenu" class="exit-btn hide-desktop"><img src="images/exit.svg" alt="exit menu"></li>
<li>Home</li>
<li>Services</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
This question already has answers here:
Why does percentage padding break my flex item?
(1 answer)
CSS Grid - unnecessary word break
(1 answer)
Closed 3 years ago.
li {
padding-right: 1%; }
Set in % causes a line break in ul list, but when changing it into px seems to work fine.
li {
padding-right: 5px; }
What is causing this error? Fiddle link
ul,
li {
float: right;
display: inline-block;
margin: 0;
padding: 0;
}
li {
padding-right: 1%;
}
<div class="navbar">
CMYK
<ul>
<li>FAQ</li>
<li>About</li>
<li>Contact</li>
<li>Home</li>
</ul>
</div>
% always work relative to something. In your case, if you try giving width to your ul, you can understand it more clearly. Let's say your ul width is 100px, so the combined with of li should be 100px, which means if any li goes above 25px in width, it will break to the next line. See the code below
ul {
float: right;
width: 50%;
margin: 0;
padding: 0;
}
li {
padding-right: 10%;
list-style: none;
display: inline-block;
}
<div class="navbar">
CMYK
<ul>
<li>FAQ</li>
<li>About</li>
<li>Contact</li>
<li>Home</li>
</ul>
</div>
I have a nav element with an unordered list and several items. I am using Flexbox to ensure sufficient width between the items and account for Media Queries. However, My background-color property isn't spanning the entire width/height of the navbar. Do I need to set these properties on a different element?
nav {
background-color: #dddddd;
& ul {
display: flex;
width: 100%;
list-style-type: none;
& li {
flex-grow: 1;
flex-shrink: 1 auto;
flex-basis: 100%;
}
& li a {
text-decoration: none;
}
}
}
<nav>
<ul>
<li>First</li>
<li>Second</li>
<li>Third</li>
<ul>
</nav>
1st. Close your ul with </ul>
2nd. Are you talking about the margin at left and right? By default, body have an 8px margin.
If you add this will remove it:
body {
margin: 0;
}
Also, I compiled your SASS to CSS just showing the example here.
The following could be really helpful to understand the default CSS value for each HTML elements.
Default CSS Values for HTML Elements
https://www.w3schools.com/cssref/css_default_values.asp
body {
margin: 0;
}
nav {
background-color: #dddddd;
}
nav ul {
display: flex;
width: 100%;
list-style-type: none;
}
nav ul li {
flex-grow: 1;
flex-shrink: 1 auto;
flex-basis: 100%;
}
nav ul li a {
text-decoration: none;
}
<nav>
<ul>
<li>First</li>
<li>Second</li>
<li>Third</li>
</ul>
</nav>
I have an evenly distributed menu like :
HTML
<nav>
<ul>
<li>Home
</li>
<li>About
</li>
<li>Contact
</li>
<li>Blog
</li>
</ul>
</nav>
CSS
nav ul {
padding:0;
margin:0;
text-align: justify;
text-transform: uppercase;
background-color: #000;
}
nav ul:after {
content:'';
width: 100%;
display: inline-block;
height: 0;
line-height: 0;
font-size: 0px;
}
nav ul li {
display: inline-block;
}
nav ul li a {
color: #fff;
}
This works great to spread the menu items accross the whole width of the bar as can be seen in this fiddle: http://jsfiddle.net/SjDEX/.
However, you can also see that a result of the ::after element the height of the ul is increased making extra space below the menu items.
Is there a way to get rid of this by making the after element not take up vertical space?
Setting its height to 0 does nothing and changing its display to block or something else breaks the layout.
It is the ul itself that has that height, not the :after, so just add
nav ul {
height: 20px;
}
Fiddle
And this code can be reduced to this:
nav ul:after {
content:'';
width: 100%;
display: inline-block;
}