Trying to add borders around menu items and make one item a different color
Question
Trying to make the background for the "Submit Assignment" button green. Our website is http://www.stephensengineering.com/stephens33/ . Solved the issue with the borders and now i need to make the background of the one menu item green. I tried adding css but still no luck.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Horizontal Navigation Bar w/Rollover Effect</title>
<style type="text/css">
<!--
#navbar ul {
margin: 0;
padding: 10px;
list-style-type: none;
text-align: right;
background-color: #000;
}
#navbar ul li {
display: inline;
}
#navbar ul li a {
font-family: 'Montserrat';
text-decoration: bold;
padding: .2em 1em;
color: #fff;
background-color: #000;
}
#navbar ul li a:hover {
color: #000;
background-color: #fff;
}
#navbar{
position: fixed;
z-index: 100000; /*To bring the navbar to the top of the stacking context*/
width: 100%;
}
nav.stricky-fixed.fadeInDown.animated{
top:40px; /*Since this element is already set as relative in the original code,
the top property places the slideIn menu 40px (height of black nav menu)
from the top of the page.*/
}
.social-icon-wrapper:hover {
background-color: transparent !important;
}
.social-icon {
width: 20px;
vertical-align: top;
}
-->
</style>
</head>
<body>
<div id="navbar">
<ul>
<li style="float:left"><a class="social-icon-wrapper" href="#about"><img class="social-icon" src="https://i.imgur.com/tonPA8V.png"></a></li>
<li style="float:left"><a class="social-icon-wrapper" href="#about"><img class="social-icon" src="https://i.imgur.com/fEvitJl.png"></a></li>
<li style="float:left"><a class="social-icon-wrapper" href="#about"><img class="social-icon" src="https://i.imgur.com/UiwMSrt.png"></a></li>
<li><a href="mailto:project@stephensengineering.com">project@stephensengineering.com</a></li>
<li><a href="+18883000642">888-300-0642</a></li>
<li><a href="http://github.com">Stephens University</a></li>
<li><a href="http://github.com">Submit Assignment</a></li>
</ul>
</div>
</body>
</html>
4 answers
solution1
0 2019-07-10 17:16:28
Just simply add a CSS outline property, like outline: 3px solid red; , to your #navbar ul li selector. The border will make overlapping borders around each navigation link. To make your Submit Assignment button green, add style="background-color: green" to the respective li element.
solution2
0 2019-07-10 17:40:36
Here's my solution. I made several changes in html and css files. Hope it will work for you.
#navbar ul { height: inherit; margin: 0; list-style-type: none; text-align: right; background-color: #000; } #navbar ul li { display: inline-block; padding: 10px 5px; height: inherit; border-left: 1px solid #fff; } #navbar ul li a { font-family: 'Montserrat'; text-decoration: bold; padding: .2em 1em; color: #fff; /* background-color: #000; */ } #navbar ul li:hover { background-color: #fff; } #navbar ul li:hover a { color: #000 !important; } #navbar{ position: fixed; z-index: 100000; /*To bring the navbar to the top of the stacking context*/ width: 100%; } nav.stricky-fixed.fadeInDown.animated{ top:40px; /*Since this element is already set as relative in the original code, the top property places the slideIn menu 40px (height of black nav menu) from the top of the page.*/ } .social-icon-wrapper:nth-child(3) { border-right: 1px solid #fff; } .social-icon-wrapper:hover { background-color: transparent !important; } .social-icon { width: 20px; vertical-align: top; }
<!-- --> <div id="navbar"> <ul> <li class="social-icon-wrapper" style="float:left"><a href="#about"><img class="social-icon" src="https://i.imgur.com/tonPA8V.png"></a></li><!-- --><li class="social-icon-wrapper" style="float:left"><a href="#about"><img class="social-icon" src="https://i.imgur.com/fEvitJl.png"></a></li><!-- --><li class="social-icon-wrapper" style="float:left"><a href="#about"><img class="social-icon" src="https://i.imgur.com/UiwMSrt.png"></a></li><!-- --><li><a href="mailto:project@stephensengineering.com">project@stephensengineering.com</a></li><!-- --><li><a href="+18883000642">888-300-0642</a></li><!-- --><li><a href="http://github.com">Stephens University</a></li><!-- --><li><a href="http://github.com">Submit Assignment</a></li> </ul> </div>
solution3
0 2019-07-10 17:44:08
To make the "Submit Assignment" button green i added a class:
<li><a class="active" href="http://github.com">Submit Assignment</a></li>
in this example i use "active" as the class and add the following CSS
.active {
padding: 10px;
background-color: green;
color: beige;
text-decoration: none;
}
And for the border, i added "border-left" to archieve what you want
#navbar ul li {
display: inline;
border-left: #fff 1px solid;
}
#navbar ul li a {
font-family: 'Montserrat';
text-decoration: bold;
padding: .2em 1em;
color: #fff;
padding: 10px;
/*background-color: #000;*/
}
solution4
0 ACCPTED 2019-07-10 18:26:58
@MercedesPennell here's the revised solution. Hope it will meet your requirement.
#navbar ul { height: inherit; margin: 0; list-style-type: none; text-align: right; background-color: #000; } #navbar ul li { display: inline-block; padding: 10px 5px; height: inherit; border-left: 1px solid #fff; } #navbar ul li a { font-family: 'Montserrat'; text-decoration: bold; padding: .2em 1em; color: #fff; /* background-color: #000; */ } #navbar ul li:hover { background-color: #fff; } #navbar ul li:hover a { color: #000 !important; } #navbar{ position: fixed; z-index: 100000; /*To bring the navbar to the top of the stacking context*/ width: 100%; } nav.stricky-fixed.fadeInDown.animated{ top:40px; /*Since this element is already set as relative in the original code, the top property places the slideIn menu 40px (height of black nav menu) from the top of the page.*/ } .social-icon-wrapper:nth-child(3) { border-right: 1px solid #fff; } .social-icon-wrapper:hover { background-color: transparent !important; } .social-icon { width: 20px; vertical-align: top; } .submit-btn { background-color: green !important; border-left: none !important; }
<!-- --> <div id="navbar"> <ul> <li class="social-icon-wrapper" style="float:left"><a href="#about"><img class="social-icon" src="https://i.imgur.com/tonPA8V.png"></a></li><!-- --><li class="social-icon-wrapper" style="float:left"><a href="#about"><img class="social-icon" src="https://i.imgur.com/fEvitJl.png"></a></li><!-- --><li class="social-icon-wrapper" style="float:left"><a href="#about"><img class="social-icon" src="https://i.imgur.com/UiwMSrt.png"></a></li><!-- --><li><a href="mailto:project@stephensengineering.com">project@stephensengineering.com</a></li><!-- --><li><a href="+18883000642">888-300-0642</a></li><!-- --><li><a href="http://github.com">Stephens University</a></li><!-- --><li class="submit-btn" ><a href="http://github.com">Submit Assignment</a></li> </ul> </div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Borders around menu items disappearing
Different color for the active item in the menu bar
Make last menu item background different color that extends and fills the rest of the space?
How to make it so that when you click on one of the menu items, the other changes color?
Changing font color of one li menu item
How can I show a hyperlinked image with two different size/color borders around it?
Trying to add active class to menu item
How to make one part of header text different font and add dashes around whole header text?
add different attributes to wordpress menu items
How to make not completed borders around an element in CSS?
Related Tags