I am trying to prevent my menu from overlapping onto itself when the viewport gets small and the menu items get pushed to the next line. Seems like a simple problem but I have spent hours on this problem with no avail.
nav {
position: absolute;
width: 100%;
text-align: center;
}
nav li {
display: inline-block;
}
nav a {
text-decoration: none;
padding: 1em;
margin: 1em;
border: 2px solid black;
}
<body>
<header>
<nav>
<ul>
<li>NavItem
</li>
<li>NavItem
</li>
<li>NavItem
</li>
<li>NavItem
</li>
<li>NavItem
</li>
</ul>
</nav>
</header>
</body>
Now shrink your window and the items all overlap.
Change the nav a{} to nav li{}:
nav li {
text-decoration: none;
padding: 1em;
margin: 1em;
border: 2px solid black;
}
See the JSFiddle.
Related
I have created a menu bar which I tried to make beautiful and align the text right but the a tag overlaps the previous one what I've tried is prioritize one selector over another one. with z-index.
So basically I want the nav bar to look like my website but I want the buttons to be clickable and not overlapping each other for the website.
If you check an early build of my website on Desktop I think you can understand my problem better due to my horrible English writing skills.
Website
and some code
nav ul {
position: inherit;
width: auto;
background: none;
height: auto;
display: flex;
padding-top: 0;
}
nav ul li {
float: left;
align-items: right;
}
nav ul li a {
color: black;
background-color: inherit;
padding: 1em 2em;
text-align: right;
width: 100%;
margin: 0;
}
nav ul li a:hover {
background-color: inherit;
position: absolute;
}
<ul class="ShowDesk HideDesk menull" id="nav">
<li id="exit" class="exit-btn HideDesk"><img src="../images/cancel-button.svg" alt="toggle menu"></li>
<li>Home</li>
<li>About</li>
<li>Contact</li>
<li>Login</li>
</ul>
Replace this:
<ul class="ShowDesk HideDesk menull" id="nav">
<li id="exit" class="exit-btn HideDesk"><img src="../images/cancel-button.svg" alt="toggle menu"></li>
<li>Home</li>
<li>About</li>
<li>Contact</li>
<li>Login</li>
</ul>
by:
<ul class="ShowDesk HideDesk menull" id="nav">
<li id="exit" class="exit-btn HideDesk"><img src="../images/cancel-button.svg" alt="toggle menu"></li>
<li>Home</li>
<li>About</li>
<li>Contact</li>
<li>Login</li>
</ul>
Basically what you need to do is to wrap the li tag or div tag whatsoever inside the anchor tag. By doing this the clickable buttons will automatically take the right position.
Hope you'll find this useful.
If I understood you well, you want to make it like this:
HTML
<body>
<nav>
Home
About
Contact
Login
</nav>
<div class="">
Rest of website
</div>
CSS
nav{
text-align: right;
}
nav a{
margin: 0 2%;
text-decoration: none;
color: black;
}
I'd be happy if it's helpful.
What I eventually did was put out the header section into a different container named navbar-container So I could style the navbar separately from the other containers. Making the width bigger without interfering with the other code. (I dont know in anyway if this is an correct way to code.) And I styled the navbar:
.navbar-container {
text-align: center;
padding: 0.8em 1.2em;
}
/* and removing the width: 100% from here; */
}
nav ul {
position: inherit;
width: auto;
background: none;
height: auto;
display: flex;
padding-top: 0;
}
nav ul li {
float: left;
align-items: right;
}
nav ul li a{
color: black;
background-color: inherit;
padding: 1em 2em;
text-align: right;
margin: 0;
}
nav ul li a:hover {
color: black;
background-color: inherit;
}
I have two nav elements that I'm using one just below the header and another one where I have the nav element nested inside an aside element. I added the code for the HTML for the nav elements and added the code for the CSS for the nav elements at the bottom of the page. I also have a picture of the website that you guys can look at which is also at the bottom of the page. What I am trying to do is add a horizontal navigation bar for one nav element and a vertical navigation bar for another nav element, but the first nav element I created is overriding the CSS for my second nav element. I'm trying to figure out a way to separate the two so the second nav element has its own CSS code. I don't know if I can use a class attribute or id attribute for the second nav element so it's separate from the first nav element I created. I can really use some help in figuring out this issue.
Here is the HTML code for the first nav element:
<nav>
<ul>
<li>
<a class="current" href="index7.html">Home</a>
</li>
<li>
Product List
</li>
<li>
Personal
</li>
<li>
Decoration Ideas
<ul class="submenu">
<li>
Outdoor
</li>
<li>
Indoor
</li>
<li>
Table
</li>
<li>
Treats
</li>
</ul>
</li>
<li>
Join Email
</li>
</ul>
</nav>
<aside>
<nav id="nav_list">
<ul>
<li>
Props
</li>
<li>
Costumes
</li>
<li>
Special Effects
</li>
<li>
Masks
</li>
</ul>
</nav>
</aside>
Here is the CSS code for the first and second nav elements
/* nav styles */
nav {
position: absolute !important;
top: 0px !important;
left: 0px !important;
display: block !important;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
position: relative;
}
nav ul > li {
float: left;
}
nav a {
display: block;
width: 160px;
text-align: center;
padding-top: 1em;
padding-bottom: 1em;
text-decoration: none;
background-color: #000000;
color: white;
font-weight: bold;
}
.current {
color: orange
}
.submenu {
position: absolute;
display: none;
top: 3em;
}
.submenu li {
float: none;
}
.submenu a:hover {
background-color: gray;
}
nav ul li:hover > ul {
display: block;
}
/* second nav element */
aside {
position: absolute !important;
top: 100px !important;
left: 0px !important;
display: block !important;
}
#nav_list ul {
list-style-type: none;
<!-- margin-left: 1.25em; -->
margin-bottom; 1.5em;
}
#nav_list ul li {
width: 200px;
margin-bottom: .5em;
<!-- border: 2px solid blue; -->
}
#nav_list a:hover {
background-color: gray;
}
Website screenshot below:
Your CSS is targeting all nav elements because you asked it to. You have no specific nav or ul classes (or id's) assigned.
I would suggest you give each nav element different classes (or Id's) so you can then target each one separately in your CSS and apply your desired styling. For example you can give the horizontal nav a class="horizontal-nav" and the vertical nav a class="vertical-nav".
That way, one is separate from the other style-wise.
check out the !important stuff.
<style>
/* nav styles */
nav {
position: absolute !important;
top: 0px !important;
left: 0px !important;
display: block !important;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
position: relative;
}
nav ul > li {
float: left;
}
nav a {
display: block;
width: 160px;
text-align: center;
padding-top: 1em;
padding-bottom: 1em;
text-decoration: none;
background-color: #000000;
color: white;
font-weight: bold;
}
.current {
color: orange
}
.submenu {
position: absolute;
display: none;
top: 3em;
}
.submenu li {
float: none;
}
.submenu a:hover {
background-color: gray;
}
nav ul li:hover > ul {
display: block;
}
/* second nav element */
aside {
position: absolute !important;
top: 100px !important;
left: 0px !important;
display: block !important;
}
#nav_list ul {
list-style-type: none;
<!-- margin-left: 1.25em; -->
margin-bottom; 1.5em;
}
#nav_list ul li {
width: 200px;
margin-bottom: .5em;
<!-- border: 2px solid blue; -->
}
#nav_list a:hover {
background-color: gray;
}
</style>
<nav>
<ul>
<li>
<a class="current" href="index7.html">Home</a>
</li>
<li>
Product List
</li>
<li>
Personal
</li>
<li>
Decoration Ideas
<ul class="submenu">
<li>
Outdoor
</li>
<li>
Indoor
</li>
<li>
Table
</li>
<li>
Treats
</li>
</ul>
</li>
<li>
Join Email
</li>
</ul>
</nav>
<aside>
<nav id="nav_list">
<ul>
<li>
Props
</li>
<li>
Costumes
</li>
<li>
Special Effects
</li>
<li>
Masks
</li>
</ul>
</nav>
</aside>
I'd want to make the header to my web page where the logo would be on the left hand side and the horizontal navigation bar on the right hand side.
The problem is that whenever I shrink the browser window the navigation bar goes below the border of the header container, thus violating the page's structure.
Like this:
Are there any solutions? I can only think of making the parent container Header accommodate its height to the child containers, but I don't know how to implement that. Or should I use the media queries somehow?
I wrote the following code.
header {
height: 100px;
background-color: gray;
background-image: url('img/background.gif');
}
#logo {
float: left;
}
nav {
float: right;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: #111;
}
<header>
<img id="logo" src="images/logo.png">
<nav>
<ul>
<li>Home
</li>
<li>About
</li>
<li>Services
</li>
<li>Gallery
</li>
<li>Blog
</li>
<li>Contacts
</li>
</ul>
</nav>
</header>
You may use the flex model or min-height + overflow to deal with floatting elements. You can also use both together, float properties will be overidden by flex where supported. ,
header {
min-height: 100px;
background-color: gray;
background-image: url('img/background.gif');
display:flex;
flex-wrap:wrap;
justify-content:space-between;
align-items:center;
overflow:hidden; /* for float if flex not supported */
}
#logo {
float: left;
/* to deal with flex */
flex-shrink:0;
margin:auto;/* or 0 or auto auto auto 0 or ... */
}
nav {
float: right;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: #111;
}
<header>
<img id="logo" src="http://dummyimage.com/140x45&text=logo.png">
<nav>
<ul>
<li>Home
</li>
<li>About
</li>
<li>Services
</li>
<li>Gallery
</li>
<li>Blog
</li>
<li>Contacts
</li>
</ul>
</nav>
</header>
Try having your li display "inline-block"? I think you'd have to take the block setting off "li a".
Then you may have to give a set width to the ul itself so that it does shrink with the page or use media queries.
I hope this helps :)
I've got the problem that on my small test website I can't get the navigation bar centered.
I want to have all the buttons on it centered while the navigation bar goes from the right to the left side of the website. I've got no fixed width and don't want to have one. The solution should also work with smartphones and tablets and just to mention: I don't really care about IE support.
I already searched a bit through the web but got nothing I've tried working.
Here is the code I've already got:
<header class="navigation">
<nav>
<ul>
<li><a class="active" href="#home">Home</a></li>
<li>Download</li>
<li>Contact</li>
<!-- Maybe the navigation bar gets more buttons in the future. -->
</ul>
</nav>
<h1>Test Test Test</h1>
</header>
And here is the CSS code:
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
border-radius: 5px;
background-color: #333333;
}
li { float: left; }
li a {
display: block;
color: white;
text-align: center;
padding: 16px;
text-decoration: none;
border-bottom: none;
}
li a:hover { background-color: #111111 }
I'm using HTML5 with CSS3.
EDIT: It seems to be that I wasn't clear enough with the buttons. The buttons should not be as large as the navigation bar itself. All buttons should be centered on the navigation bar, so in the middle there are the buttons and on the left and right side there is just the black navigation bar without buttons if there is enough space left, ofcourse.
Using flexbox will do exactly that...
adding flex-flow: row wrap; will allow the menu to wrap on smaller screens if the navigation is larger than the viewport.
You will need to prefix those styles to run on all browsers FYI.
.navigation nav {
display: flex;
justify-content: center;
background-color: #333333;
}
ul {
display: flex;
flex-flow: row wrap;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
border-radius: 5px;
}
li a {
display: block;
color: white;
text-align: center;
padding: 16px;
text-decoration: none;
border-bottom: none;
}
li a:hover {
background-color: #111111
}
<header class="navigation">
<nav>
<ul>
<li><a class="active" href="#home">Home</a>
</li>
<li>Download
</li>
<li>Contact
</li>
<!-- Maybe the navigation bar gets more buttons in the future. -->
</ul>
</nav>
<h1>Test Test Test</h1>
</header>
Solution just with two lines of css:
1. ul{ text-align: center;}
2. li{display: inline-block;}
That's all :)
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
border-radius: 5px;
background-color: #333333;
text-align: center;
}
li { display: inline-block; }
li a {
display: block;
color: white;
text-align: center;
padding: 16px;
text-decoration: none;
border-bottom: none;
}
li a:hover { background-color: #111111 }
</style>
</head>
<body>
<header class="navigation">
<nav>
<ul>
<li><a class="active" href="#home">Home</a></li>
<li>Download</li>
<li>Contact</li>
<!-- Maybe the navigation bar gets more buttons in the future. -->
</ul>
</nav>
<h1>Test Test Test</h1>
</header>
</body>
</html>
The simpliest solution I think will be if will just divide 100% by number of li items in menu, so in this case we have 3 li elements so about 33% of width:
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
border-radius: 5px;
background-color: #333333;
}
li {
float: left;
width: 33%;
}
li a {
display: block;
color: white;
text-align: center;
padding: 16px;
text-decoration: none;
border-bottom: none;
}
li a:hover { background-color: #111111 }
<html>
<head>
</head>
<body>
<header class="navigation">
<nav>
<ul>
<li><a class="active" href="#home">Home</a></li>
<li>Download</li>
<li>Contact</li>
<!-- Maybe the navigation bar gets more buttons in the future. -->
</ul>
</nav>
<h1>Test Test Test</h1>
</header>
</body>
</html>
I'm in the process of developing my first website and I'm having an issue with the Navigation Bar. I'm using CSS rules to align the bar but unfortunately when I set the rules to float:right; my text is floating right but it’s lining up backwards on the bar. How can I float the text over to the right and align the text correctly?
.nav ul li {
display: inline-block;
float: right;
padding: 10px 10px;
}
.nav {
background-color: black;
position: fixed;
width: 100%;
top: 0px;
margin: auto;
font-weight: bold;
border-bottom: 2px solid orange;
margin-top: 5px;
}
.nav ul li a {
color: orange;
text-transform: uppercase;
letter-spacing: 0.05em;
padding: 0px 10px;
}
<div class="nav">
<ul>
<li>Home
</li>
<li>About
</li>
<li>Contact
</li>
<li>Portfolio
</li>
<li>FAQ
</li>
</ul>
</div>
You need to float the ul list, not individual list items li.
Setting float: right on li allows the first list item to align to the right first and then the rest of the items take their positions similarly. It caused the direction of the list from right to left.
.nav ul {
float: right; /* Added */
}
.nav ul li {
display: inline-block;
padding: 10px 10px;
/* float: right; Removed */
}
.nav {
background-color: black;
position: fixed;
width: 100%;
top: 0px;
margin: auto;
font-weight: bold;
border-bottom: 2px solid orange;
margin-top: 5px;
}
.nav ul li a {
color: orange;
text-transform: uppercase;
letter-spacing: 0.05em;
padding: 0px 10px;
}
<div class="nav">
<ul>
<li>Home
</li>
<li>About
</li>
<li>Contact
</li>
<li>Portfolio
</li>
<li>FAQ
</li>
</ul>
</div>