So I have a border-right on my navbar list which looks like this
However I would like it to look this Is this possible without using images instead?
Thanks.
Navbar css
.navbar .navbar-inner {
padding: 0;
}
.navbar .nav {
margin: 0;
display: table;
width: 100%;
}
.navbar .nav li {
display: table-cell;
width: 11.1%;
float: none;
text-align: center;
left: 4px;
font-weight: bold;
height: 15px;
}
.navbar .nav li a {
border-right: 1px solid black;
height: 10px;
line-height: 10px;
}
#active-link {
text-decoration: underline;
}
.navbar .nav li:first-child a {
border-left: 0;
border-radius: 3px 0 0 3px;
}
.navbar .nav li:last-child a {
border-right: 0;
border-radius: 0 3px 3px 0;
}
Try to set the border-right to the <a> element instead of the <li> element.
Edit 1
Since your border-right is attached to your a element try this:
.nav li { height: 15px; }
.nav li a { height: 10px; }
You can now probably see that the border is smaller than the menu button itself. Just play a little with the heights to see what you want.
Edit 2
Also add this:
.nav li a { line-height: 15px; }
The line-height has to be the same height as the list item.
you may use a pseudo with a border or a single letter
ul {
background:#EBEBEB;
}
li {
display:inline-block;
line-height:3em;
vertical-align:middle;
}
li + li:before {/* do not on first */
content: ' | ';
font-size:0.75em;/* resize it here */
padding:0 1em;
text-shadow: 1px 1px #555;/* or box-shadow or border-style if border used*/
vertical-align:bottom;/* or else */
}
a {
color:#222;
}
a:hover , a.active{
color:#FB853C;
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Clients</li>
<li>Contact Us</li>
</ul>
</nav>
Related
Hey I can't understand if there is any easy way to solve this:
I want the black border to be on top of the blue border not extend the height of the navigation.
I've looked at inset and adding bottom in the a but I want to override the one from .navigationbar
HTML
<nav class="navigationbar">
<ul>
<li>
One
</li>
<li>
Two
</li>
<li>
Three
</li>
</ul>
</nav>
CSS
* {
margin: 0;
}
.navigationbar {
background-color: #000000;
width: 100%;
border-bottom: .1em solid #0000FF;
}
.navigationbar ul {
list-style-type: none;
overflow: hidden;
}
.navigationbar ul li {
float: left;
color: #FFFFFF;
}
.navigationbar ul li a {
height: 100%;
display: block;
color: #FFFFFF;
text-align: center;
text-decoration: none;
padding-left: 1em;
padding-right: 1em;
padding-top: 1em;
padding-bottom: 1em;
}
.navigationbar ul li a:hover {
background: #0000FF;
color: #FFFFFF;
border-bottom: .1em solid #000000;
}
.navigationbar img {
float: left;
}
https://jsfiddle.net/55r2e9bq/
Why not just set the border and change its color later?
.navigationbar ul li a
{
border-bottom: .1em solid transparent;
}
.navigationbar ul li a:hover
{
border-bottom-color: #000000;
}
The border you are seeing comes from the rule .navigationbar ul li a:hover{...} where you have border-bottom: .1em solid #000000;. It is not extending to 100% of width of the navigation bar, but is causing it becomes higher.
If you want the navigationbarstays of the same height you should assign the border also to the normal state of the a element then you can change its color to whatever you want.
This way:
.navigationbar ul li a {
height: 100%;
display: block;
color: #FFFFFF;
text-align: center;
text-decoration: none;
padding-left: 1em;
padding-right: 1em;
padding-top: 1em;
padding-bottom: 1em;
border-bottom: .1em solid #ffcc00; /* add this property with the same value of the `:hover` state */
}
You can add border-bottom: 0.1em solid #000000; to .navigationbar ul li a to avoid that movement/height increase:
https://jsfiddle.net/p7L7adhe/1/
I am having difficulty changing the font color on my Nav bar heres the HTML.
<div id="nav" class = "menu">
<ul>
<li>Home</li>
<li>Team members
<ul class ="sub-menu">
<li>F.E.A.R Ballard</li>
<li>F.E.A.R Snakeshit</li>
<li>Redi</li>
</ul>
</li>
<li>Cool Stuff</li>
<li>Gallery
<ul class ="sub-menu">
<li>Squad</li>
<li>Dayz</li>
<li>Arma III</li>
</ul>
</li>
<li>Contact
<ul class ="sub-menu">
<li>Teamspeak</li>
<li>E-mail</li>
</ul>
</li>
<li>Facebook</li>
<li>Steam</li>
</ul>
</div><!-- links -->
And the CSS
.menu {
margin: 0px;
width: auto;
}
.menu li {
margin: 0px;
}
/*----- Top Level -----*/
.menu ul li {
display: inline-block;
position: relative;
font-size: 15px;
}
/*----- Bottom Level -----*/
.menu li:hover .sub-menu {
z-index: 1;
opacity: 1;
}
.sub-menu {
width: 100%;
border-top: none;
border-left: 1px solid green;
border-right: 1px solid green;
margin: 0px;
position: absolute;
top:100%;
left:0px;
z-index:-1;
opacity:0;
}
.sub-menu li {
display: block;
font-size: 10px;
margin-top: 5px;
padding-bottom: 2px;
border-bottom: 1px solid green;
}
.sub-menu li a {
padding:10px 30px;
margin: 5px;
display:block;
}
#nav {
display: inline;
width: 100%;
height: 150px;
background-color: #879396;
}
#nav ul {
text-align: center;
padding: 0px;
background-color: #9C9898;
}
#nav li {
width: 105px;
background-color: #9C9898;
}
#nav li a {
padding: 0px;
margin: 1px;
}
#nav li a:link
{
text-decoration: none;
font-color: #000;
font-weight: bold;
}
I have tried multiple things i just cant seem to get the font color to change at the moment. Please Note i just want the font to change color, it is currently red and blue which looks horrible.
I have been out the game too long, Please advise.
Try this
#nav li a { color: green; }
Remember it's color:value in CSS and not font-color. Also adding :link to an a tag is not necessary. Just use a instead of a:link unless you really need to target links with actual hrefs
You have to provide color for the anchor tag because it don't inherit the color
check this fiddle
a {color: #fff;}
https://jsfiddle.net/Med7at/j4fxj7gw
I have a menu that works really well but the submenu items overlap when there are too long. I tried setting the line-height to 24px which made the text ok but then the hover background color stuff was too small. Here's the code:
.nav ul {
list-style: none;
background-color: #5FD6D6; /*nav background */
text-align: center;
padding: 0;
margin: 0;
}
.nav li {
border-bottom: 1px solid #888;
}
.nav a {
text-decoration: none;
color: black; /* font color */
display: block;
transition: .3s background-color;
}
.nav a:hover {
background-color: #BFEFEF; /* hover color */
}
.nav a.active {
background-color: #ED1C24; /*selected color */
color: white;
cursor: default;
}
/* Sub Menus */
.nav li li {
font-size: 1em;
}
#media screen and (min-width: 650px) {
.nav li {
width: 150px;
border-bottom: none;
height: 100px;
line-height: 100px;
font-size: 2em;
display: inline-block;
margin-right: -4px;
}
.nav a {
border-bottom: none;
}
.nav > ul > li {
text-align: center;
}
.nav > ul > li > a {
padding-left: 0;
}
/* Sub Menus */
.nav li ul {
position: absolute;
display: none;
width: inherit;
}
.nav li:hover ul {
display: block;
}
.nav li ul li {
display: block;
}
}
<div class="nav">
<ul>
<li>Home
</li>
<li>Tutorials
<ul>
<li>Tutorial #1##
</li>
<li>Tutorial #2
</li>
<li>Tutorial #3
</li>
</ul>
</li>
<li><a class="active" href="#">About</a>
</li>
<li>Newsletter
<ul>
<li>News #1
</li>
<li>News #2###
</li>
<li>News #3
</li>
</ul>
</li>
</ul>
</div>
There are already some working answers, but if you'd like the child navigation items to increase in width as needed (as opposed to increase in height), I'd suggest removing an explicit width from .nav li (inside the media query), and adding it instead as a min-width to .nav > ul > li (also inside the media query).
(On a personal level, I find it much more readable if navigation items increase in width as needed and stick to a single line, instead of breaking to a new line and increasing in height.)
So those two declaration blocks would go from:
#media screen and (min-width: 650px) {
.nav li {
width: 150px;
border-bottom: none;
height: 100px;
line-height: 100px;
font-size: 2em;
display: inline-block;
margin-right: -4px;
}
.nav > ul > li {
text-align: center;
}
}
To:
#media screen and (min-width: 650px) {
.nav li {
border-bottom: none;
height: 100px;
line-height: 100px;
font-size: 2em;
display: inline-block;
}
.nav > ul > li {
text-align: center;
min-width: 150px; /* new */
margin-right: -4px; /* moved */
}
}
Note that I also moved the negative margin-right between the declaration blocks, as this seemed to be causing some issues with the child navigation items' backgrounds. Here's a JSFiddle to demonstrate the code in action.
Hope this helps! Let me know if you have any questions.
You can remove the "height", that worked for me:
.nav li {
width: 150px;
border-bottom: none;
/*height: 100px;*/
line-height: 100px;
font-size: 2em;
display: inline-block;
margin-right: -4px;
}
I don't like setting line-height that big except for special cases.
In your case, instead of having that big I believe it's more appropriate to use padding.
So to do that:
First remove line-height and height on .nav li, then it will now look like this.
.nav li {
width: 150px;
border-bottom: none;
font-size: 2em;
display: inline-block;
margin-right: -4px;
}
Then in your .nav a add a padding :
.nav a {
text-decoration: none;
color: black;
display: block;
transition: .3s background-color;
padding: 1em 0;
}
This way, your list are more flexible than having a fixed height.
Working example
.nav ul {
list-style: none;
background-color: #5FD6D6; /*nav background */
text-align: center;
padding: 0;
margin: 0;
}
.nav li {
border-bottom: 1px solid #888;
}
.nav a {
text-decoration: none;
color: black; /* font color */
display: block;
transition: .3s background-color;
padding: 1em 0;
}
.nav a:hover {
background-color: #BFEFEF; /* hover color */
}
.nav a.active {
background-color: #ED1C24; /*selected color */
color: white;
cursor: default;
}
/* Sub Menus */
.nav li li {
font-size: 1em;
}
#media screen and (min-width: 650px) {
.nav li {
width: 150px;
border-bottom: none;
font-size: 2em;
display: inline-block;
margin-right: -4px;
}
.nav a {
border-bottom: none;
}
.nav > ul > li {
text-align: center;
}
.nav > ul > li > a {
padding-left: 0;
}
/* Sub Menus */
.nav li ul {
position: absolute;
display: none;
width: inherit;
}
.nav li:hover ul {
display: block;
}
.nav li ul li {
display: block;
}
}
<div class="nav">
<ul>
<li>Home</li>
<li>Tutorials
<ul>
<li>Tutorial #1##</li>
<li>Tutorial #2</li>
<li>Tutorial #3</li>
</ul>
</li>
<li><a class="active" href="#">About</a></li>
<li>Newsletter
<ul>
<li>News #1</li>
<li>News #2###</li>
<li>News #3</li>
</ul>
</li>
</ul>
</div>
In menu I apply last-child declaration to { border: none;}. After that my SUBmenu doesn't show borders even with declaration: {border-bottom: 1px solid black;} Any ideas why my second declaration doesn't work? FIDDLE
P.S I figured out that when I change ul.topmenu.... to ul.... everthing works perfect. But I still need to have ability to use my class name.
/************QUESTION ZONE**************/
ul li a {
border-bottom: 1px solid black;
}
ul.topmenu li:last-child a {
border: none;
}
ul.secondsubmenu li a {
border-bottom: 1px solid black;
}
/**********end question********/
ul, li {
margin: 0;
padding: 0;
list-style: none;
}
ul {
height: 2em;
background: yellow;
}
li {
float: left;
}
li a {
display: block;
line-height: 2em;
width: 6em;
text-align: center;
}
ul.submenu, ul.secondsubmenu {
height: auto;
}
ul.submenu li {
float: none;
}
ul.secondsubmenu {
background: yellow;
color: white;
height: auto;
position: absolute;
left: 12.6em;
top: 6.9em;
margin-left: 1px;
}
<nav>
<ul class="topmenu">
<li>!
<li>!!
<ul class="submenu">
<li>111
<li>222
<li>333
<ul class="secondsubmenu">
<li>1</li>
<li>1</li>
<li>1</li>
</ul>
</li>
</ul>
</li>
<li>222
</ul>
</nav>
change this
ul.topmenu li:last-child a {
border: none;
}
to this
ul.topmenu > li:last-child a {
border: none;
}
when you add this symbol > it means only first children's
example
Because the ul.topmenu li:last-child a is more specific, and all the a tags in the submenu (which belongs to the last li) are matched by this rule
change your second rule to
ul.topmenu .secondsubmenu li a {
border-bottom: 1px solid black;
}
Put the two rules in http://specificity.keegan.st/ to understand their specificity.
I'm working on a navigation menu, and have created a containing four anchor tags, as below:
<nav>
<ul>
<li>BLOG</li>
<li>ABOUT ME</li>
<li>PORTFOLIO</li>
<li>CONTACT</li>
</ul>
</nav>
I've set a top border of 10px for each link, which I want to sit tight on top of the text. Despite setting padding to 0 in all the right places, I can't get rid of the padding. I've tried changing line height but this just moves the whole nav section up or down the screen, and doesn't affect the gap between the anchor text and the top border.
Here's the CSS (not including CSS resets etc, which I can post if needed, but these mostly came from HTML5BoilerPlate.
nav ul {
padding-right: 24px;
float: right;
}
nav li {
display: inline;
font-family: Oswald;
font-size: 25px;
}
nav a {
color: #7a7a7a;
text-decoration: none;
margin-left: 16px;
}
nav li a {
border-top: 10px solid #7a7a7a;
}
nav a:hover {
color: #555555
}
nav a.active {
color: #555555;
}
nav a.highlight:hover {
color: #1f9c66;
}
a.highlight {
color: #29cf86;
}
Can anyone help? Thanks.
Set an anchor float which will remove the margin & padding in every web-browser.
#container li a {
float:left;
}
You could translate the anchors a few pixels up via relative positioning:
li {
display: inline;
margin-left: 16px;
border-top: 10px solid #7a7a7a;
}
a {
position: relative;
top: -6px;
}
Live demo: http://jsfiddle.net/XQK9h/
I think it helps you.
<style type="text/css">
nav ul {
padding-right: 24px;
float: right;
}
nav div {
border-top: 10px solid green;
display: block;
float: left;
font-family: Oswald;
font-size: 25px;
height: 10px;
margin: 10px;
}
nav a {
color: #7a7a7a;
text-decoration: none;
}
nav a:hover {
color: #555555
}
nav a.active {
color: #555555;
}
nav a.highlight:hover {
color: #1f9c66;
}
a {
position: relative;
top: -3px;
}
a.highlight {
color: #29cf86;
}
</style>
<nav>
<ul>
<div>BLOG</div>
<div>ABOUT ME</div>
<div>PORTFOLIO</div>
<div>CONTACT</div>
</ul>
</nav>