I have a nav / menu bar with a max-width of 900px. Inside the nav bar is five links:
<nav>
<ul>
<li>Workshops</li>
<li>Production workshop</li>
<li>About us</li>
<li>News</li>
<li>Contact us</li>
</ul>
</nav>
I would normally make the five links 20% width, to fill the width of the nav bar and be fluid.
However, because the link text has very different lengths "Production workshops" compared to "News", I want the widths of the links/tabs to be based on the text. I've added left and right padding to the links. But now this is not fluid (it breaks below 900px width) and I can't accurately get the links to fill the width of the nav bar.
Is there a way for the links to fill the width of the nav bar, have a flexible width and for the widths of the links/tabs to be different (based on the width of the text)?
A link to JS Fiddle:
https://jsfiddle.net/j0g53wnu/
<nav>
<ul>
<li>Workshops</li>
<li>Production workshop</li>
<li>About us</li>
<li>News</li>
<li>Contact us</li>
</ul>
</nav>
nav {
background-color:brown;
max-width:900px;
}
nav ul {
font-size:21px;
line-height:60px;
overflow:auto;
margin: 0;
padding: 0;
}
nav ul li {
float: left;
text-align: center;
list-style: none;
margin: 0;
padding: 0;
}
nav a:link { color:rgb(255,255,230); background-color:rgb(0,0,0); border-right:1px solid rgb(255,255,230); display:block; padding:0 38px; }
nav a:visited { color:rgb(255,255,230); background-color:rgb(0,0,0); border-right:1px solid rgb(255,255,230); display:block; padding:0 38px; }
nav a:hover { color:rgb(51,153,51); background-color:rgb(0,0,0); border-right:1px solid rgb(255,255,230); display:block; padding:0 38px; }
nav a:active { color:rgb(51,153,51); background-color:rgb(0,0,0); border-right:1px solid rgb(255,255,230); display:block; padding:0 38px; }
You can make it fuild with CSS Grid in many different ways, one quick easy approach would be like this:
ul {
list-style-type: none;
display: grid;
grid-template: ". . . . .";
}
li {
background-color: grey;
text-align: center;
}
Here you can check a working version based on your same example:
https://jsfiddle.net/j0g53wnu/4/
Change the result area to see how it fixes the width.
Hope this help :)
Have you considered flexbox?
Just changed a little, including flex-grow (to allow for the different sizes of the items.)
nav ul {
font-size:21px;
line-height:60px;
overflow:auto;
text-align: center;
display: inline-block;
margin: 0;
padding: 0;
display:flex;
box-sizing:border-box;
}
nav ul li {
flex-grow:2;
text-align: center;
list-style: none;
}
1) add this code to Cascade style sheet file
.display-flex {
display:flex;
}
.fill {
fill:1 1 auto!important
}
2) add class display-flex to UL tag
<ul class="display-flex"></ul>
3) add class fill to each Li tag
<li class="fill"></li>
If you need another solve,
You can come with me via email
I have all my buttons of my nav bar and I have my logo already in top left but the bigger i make it, the thicker my nav bar becomes because i have padding set in css and my image URL is set in the Html:
css
li a {
display: block;
color: white;
text-align: center;
padding: 25px 50px;
text-decoration: none;
border: 1px;
}
HTML
<ul>
<li><a class="active" href="#home.asp">HOME</a></li>
<li style="float:right">
<a href="#logo">
<img src="logo.png" alt="bandlogo" height="25px" width="50px">
</a>
</li>
</ul>
Is there a way to counter this issue like make a different <ul> or an addition to the li.
Thank you
Have text styles and image styles separate:
#nav li .text {
padding: x
}
#nav li .logo {
padding: x
}
<html>
<head>
<title> Playing with Cascading Style Sheets </title>
<style type = "text/css">
.nav { background-color : green;
height : 35px;
font-size : 25px;
font-weight : bold;
display : block;
}
.nav ul {
list-style : none;
margin : 0;
padding : 0;
display : inline;
}
.nav li {
display : inline;
padding : 100px;
vertical-align : middle;
}
.nav a {
text-decoration : none;
padding : 8px 8px 8px 8px;
color : white;
vertical-align : middle;
}
.nav a:hover
{
color : black;
background-color : white;
}
</style>
</head>
<body>
<div class = "nav">
<ul>
<li>Home</li>
<li>Links</li>
<li>About Us</li>
<li>Contact Us</li>
</ul>
</div>
</body>
</html>
Query :- While using the background-color style on body tag at the style tag or by another way like using div tag the horizontal menu is not working as it works before without using the background color.
Problem with using background color is that after using it the horizontal menu context get outs of its div block of class= ".nav" when I shrink the browser size.
I have a Logo at the top of my page that is designed that it has letters that hang down over the menu bar(a 'y').
With no real special coding (just setting the heights of the containers I have gotten this to look fine.
My problem is that the img blocks the links in the menu from being clickable as the links are sitting behind the transparent background of the logo.
I hope that made sense.
I will include my code, but as I said its pretty simple.
<header>
<asp:Image ID="Image1" CssClass="logo" runat="server" ImageUrl="/media/1001/logo.png" />
</header>
<menu>
<ul>
<li>Home</li>
<li>How To Order</li>
<li>Products</li>
<li class="noBorder">Blog</li>
</ul>
</menu>
CSS:
header { background-color: #3a8c86; border-bottom: solid 4px #20716b; height: 52px; }
header img.logo {margin-left:5px;}
menu { background-color: #e78898; height: 21px; }
menu ul li { float: left; list-style: none; margin: 3px 0 0 14px; padding-right: 14px; border-right: solid 1px white; }
menu ul li a { color: white; text-decoration: none; }
Thanks in advance.
Position the image and then give it a lower z-index value
header img.logo {
position:relative;
z-index:-1;
}
http://jsfiddle.net/8ydvmedr/
Edit Mission accomplished, thank you for your replies. If anyone can help me with the click to expand/fade to view feature, it would be very helpful. I'm currently looking into it.
I am working on a very simple navigation for my website. I can't figure out why the texts can't stick to the right. Here is an example: http://jsfiddle.net/E6ArK/
I also hope to add a click-to-expand and maybe a fade into view feature some time. Any help would be much appreciated.
HTML
<div class="navigation">
<ul>
<li>
<h1>Applications</h1>
<ul>
<li>Not Available</li>
<li>Not Available</li>
</ul>
</li>
<li>
<h1>Forum</h1>
<ul>
<li>Not Available</li>
<li>Not Available</li>
</ul>
</li>
<li>
<h1>Guilds</h1>
<ul>
<li>Not Available</li>
<li>Not Available</li>
</ul>
</li>
<li>
<h1>Imageboards</h1>
<ul>
<li>People</li>
<li>Random</li>
<li>Screen Shots</li>
<li>Wallpapers</li>
</ul>
</li>
<li>
<h1>Projects</h1>
<ul>
<li>Not Available</li>
<li>Not Available</li>
</ul>
</li>
</ul>
</div>
CSS
/* NAVIGATION */
/* Heading */
.navigation ul li h1 {
background : #000000;
color : #ffffff;
display : table;
font-weight : 100;
margin : 0;
padding : 6px;
border-right : 3px solid #ffffff;
font-size : 28px;
margin-bottom : 3px;
}
/* Positioning */
.navigation {
font-family :'Open Sans Condensed', sans-serif;
margin : 12px;
position : fixed;
right : 0;
top : 0;
}
.navigation ul {
font-size : 20px;
margin : 0;
padding : 0;
text-align : right;
}
.navigation ul li {
clear : right;
color : #ffffff;
float : right;
list-style-type : none;
}
/* Second Level */
.navigation ul li ul {
display : none;
}
.navigation ul li:hover ul {
display : block;
}
.navigation ul li ul li {
background : #000000;
border-right : 3px solid #ff0000;
color : #ffffff;
display : table;
font-size : 18px;
margin-bottom : 3px;
padding : 6px;
}
You need to float the heading to the right as well. Add float: right to your block of rules for .navigation ul li h1. That should keep them stuck to the right.
You simply need to add a float:right property to your heading styling:
/* Heading */
.navigation ul li h1 {
background : #000000;
color : #ffffff;
display : table;
font-weight : 100;
margin : 0;
padding : 6px;
border-right : 3px solid #ffffff;
font-size : 28px;
margin-bottom : 3px;
float: right;
}
Hope that helps