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
Related
So there is the letter spacing/gap between each word and i want to minimize that, but when i try to do it the only thing that shrinks is the button itself.
.navbar {
position: fixed;
top: 0;
right: 7%;
z-index: 10;
display: flex;
text-align: center;
display: table;
}
.navbar ul {
flex: 1;
text-align: right;
padding: 40px;
background: transparent;
}
.navbar ul li {
display: inline-block;
list-style: none;
margin: 10px 30px;
background: transparent;
}
.navbar ul li {
display: inline-block;
list-style: none;
margin: 10px 30px;
background: transparent;
}
.navbar ul li a {
color: #6dffe7;
text-decoration: none;
letter-spacing: 1px;
font-size: 15px;
cursor: pointer;
}
body { background: black; }
<div class="page">
<nav class="navbar">
<ul>
<div class="download-btn">
<li>Home</li>
<li>About</li>
<li>Work</li>
<li>Contact</li>
<li> Download Resume</li>
</div>
</ul>
</nav>
</div>
Thank you for your help
I think you are trying to recreate the navbar as depicted in the image provided. As such, you need to following rules:
Horizontal navbar with a fixed height (I assumed it to be 100px).
All links except for the button should appear on the left and separated by some gap.
The "Download Resume" button needs to appear on the right side of your navbar.
There should be some padding at the left and right side of the navbar (I assumed this to be 2rem).
To achieve, this you need to set flex layout on your navbar, so that we can use the align-items: center to center the links vertically inside the navbar. We then need to set flex layout on the ul itself, and give it flex-direction: row with some gap: 2rem.
Now to place the button on the far right side of your navbar, you need to remove it from the ul inside the navbar, and place it as a sibling below it. And set justify-content: space-between on your navbar. This should move the links to far left, and the button to far right.
Additionally, we can style the visuals by giving navbar a background-color and color. We then inherit this color onto the anchor links a. We also set list-style: none and text-decoration: none on the ul and a respectively, to achieve the look of the image linked in the question.
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.navbar {
padding: 0 2rem;
position: fixed;
top: 0;
width: 100%;
background-color: #12182b;
color: #6dffe7;
height: 100px;
display: flex;
align-items: center;
justify-content: space-between;
}
.navbar ul {
display: flex;
flex-direction: row;
align-items: center;
list-style: none;
gap: 2rem;
}
.navbar ul a {
font-size: 0.9em;
color: inherit;
text-decoration: none;
}
.navbar .btn {
font-size: 0.9em;
border: 2px solid #6dffe7;
padding: 0.6em;
text-decoration: none;
color: inherit;
font-weight: bold;
}
<div class="page">
<nav class="navbar">
<ul>
<li>Home</li>
<li>About</li>
<li>Work</li>
<li>Contact</li>
</ul>
Download Resume
</nav>
</div>
Looking at the image it seems like you want to adjust nav items spacing instead of letter spacing/gap.
You can try to adjust paddings/margins on navbar ul and the li child items.
Also, you have duplicate display prop on .navbar you can remove one.
.navbar {
background-color: #12182b;
position: fixed;
top: 0;
left: 0;
z-index: 1;
display: flex;
text-align: center;
}
.navbar ul {
flex: 1;
text-align: right;
padding: 20px;
background: transparent;}.navbar ul li {
display: inline-block;
list-style: none;
margin: 10px 20px;
background: transparent;
}
.navbar ul li {
display: inline-block;
list-style: none;
margin: 10px 20px;
background: transparent;
}
.navbar ul li a {
color: #6dffe7;
text-decoration: none;
letter-spacing: 1px;
font-size: 15px;
cursor: pointer;
}
<nav class="navbar">
<ul>
<div class="download-btn">
<li>Home</li>
<li>About</li>
<li>Work</li>
<li>Contact</li>
<li>
Download Resume </li>
</div>
</ul>
</nav>
it seems to me you use bootstrap if you do then you will to need to use !important after any styles in css
I'm trying to get my navigation items to be clickable blocks rather than just the text inside the block but I can't get it to work. I've added a display-block against my <a> tag but it's having no effect. What am I missing?
nav li {
float: left;
margin: 0 1em 0 1em;
list-style-type: none;
background-color: lightblue;
border-radius: 10%;
padding: .7em;
}
nav a {
color: #6a6a6a;
display: block;
text-decoration: none;
}
nav ul {
padding: 0;
margin: 0;
}
nav {
display: inline-block;
}
<nav>
<ul>
<li>About Us</li>
<li>Gallery</li>
<li>Calendar</li>
</ul>
</nav>
You need to apply the padding to the <a> tags themselves, not the <li>s
I'm trying to make my nav bar be horizontal and centered. Right now, it's all smushed to the right of the website. How do I control where the bar is located?
Also, why can't I just have all my css under #nav (why do I need #nav ul li, etc?)
#nav{
width: 90%;
text-align: center;
font-size: 35px;
text-align: center;
}
#nav ul li{
display: inline;
height: 60px;
text-align: center;
}
#nav ul li a{
padding: 40px;
background: #25ccc7;
color: white;
text-align: center;
}
<div id="nav">
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
You need the different css selectors because not all the styles are meant to be applied to the surrounding container #nav, but to certain elements inside it. With pure CSS, it is not possible to nest rules. If nesting is what you were asking for, take a look at LESS or SASS (DuckDuckGo is your friend).
Your list items were pushed a little to the right because that is the natural behaviour of list items unless you overwrite the responsible css attributes margin and / or padding (depending on the browser). So just reset both to 0 in your CSS for the list items.
#nav {
background-color: #e8e8e8;
width: 90%;
font-size: 35px;
text-align: center;
margin: 0 auto;
}
#nav ul {
display: inline-block;
white-space: nowrap;
margin: 0;
padding: 0;
}
#nav ul li {
display: inline;
text-align: center;
margin: 0;
padding: 0;
}
#nav ul li a {
padding: 40px;
background: #25ccc7;
color: white;
text-align: center;
}
<div id="nav">
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
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 have the below nav menu and whenever i resize using the ctrl+right click the last item FAQ appears and dissapears..not to mention it also breaks my entire site background represented by 2 images.
whats wrong and how to make it stay the same on resizing? cheers!
html:
<div class="nav">
<ul>
<li class='active '><a href='#'><span>Home</span></a></li>
<li><a href='#'><span>about us</span></a></li>
<li><a href='#'><span>our errand ladies</span></a></li>
<li><a href='#'><span>schedule an errand</span></a></li>
<li><a href='#'><span>contact us</span></a></li>
<li><a href='#'><span>faq</span></a></li>
</ul>
</div>
css:
.nav {
width: 100%;
height: 63px;
overflow: hidden;
}
.nav ul {
margin: 0;
padding: 0;
list-style-type: none;
width: auto;
position: relative;
display: block;
height: 63px;
text-transform: uppercase;
font-size: 21px;
background: transparent url('images/nav-bg-repeat.png') repeat-x top left;
font-family: Helvetica,Arial,Verdana,sans-serif;
}
.nav li {
display: block;
float: left;
margin: 0;
padding: 0;
}
.nav li a {
display: block;
float: left;
text-decoration: none;
padding:0 30px;
height: 63px;
line-height: 63px;
vertical-align: middle;
background: transparent url('images/divider.png') no-repeat top right;
}
.nav li a:hover {
background: transparent url('images/nav-hover.png') repeat-x top right;
}
.nav li a span {
color: #000;
font-weight: bold;
}
You have overflow: hidden; set on your .nav element and no width defined.
By default, the .nav is set to 100% width, as it's a block element. It will automatically span the width of the parent it's currently sitting in.
When you resize the window down to a size that cannot fit the links, they fall outside of the .nav and are hidden from view.
You can set a fixed width to your .nav (or parent container) to prevent it from collapsing in width.
.nav {
width: 960px;
}
Or if you still want it to collapse, but still show the nav links, you can remove overflow: hidden; and the elements will appear (however, they will not be inline with each other.
for the second problem set the
body{
background-repeat:no-repeat;
}
and it disappears as overflow is hidden; set it to none
.nav{
width:1000px;
overflow:none;
..
}
the way i see is you are trying to put the list elements inline so you can try this code and modify the looks:
<ul id="navlist">
<li id="active">Home</li>
<li>Here</li>
<li>There</li>
<li>Faq</li>
<li>Contact</li>
</ul>
</div>
#navlist li
{
display: inline;
list-style-type: none;
padding-right: 20px;
}