How can I change the menu color when the page is selected?
Example:
home faq contact_us
I want to show which page is selected in the menu bar. I'm using CSS but not sure how to go about this.
My CSS code:
.menu {
float: left;
margin: 0px 0 0 0;
width: 1000px;
}
.menu li {
border-left: 1px solid #fff;
float: left;
line-height: 1em;
text-align: center;} .menu li a { color: #fff;
display: block;
font: 17px Arial, Helvetica, sans-serif;
padding: 0px 31px;
line-height:47px;
text-decoration: none;
}
.menu li a span {display:block; padding:0px 15px;}
.menu li a:hover, .menu .active a{color:#fff;
background:#ed1f26 url(images/menuleft.jpg) left top no-repeat;
width:auto;
}
.menu li a:hover span, .menu .active a span
{background: url(images/menuright.jpg) right top no-repeat;
padding:0px 14px;
border:1px solid #b3c302;
}
Well, if you're writing the menu to each page (as seems to be the case from your comments) there's nothing stopping you from changing the background colour for the specific <li> related to that page.
Example below showing white background for current page (Home) or default colour for non-active pages.
<li style="background-color:rgb(255,255,255);">Home</li>
<li>FAQ</li>
<li>Contact Us</li>
Alternatively you could use some script and create tabs like I have done in this fiddle: http://jsfiddle.net/gstubbenhagen/zAbmA/
I would only recommend the tabs if you don't have too much content on each page as you don't want to make 1 very large page which takes forever to load on slower connections.
NOTE: If using the tabs option the example provided uses a JQuery plugin, make sure you add the same tools if you are not going to re-code.
Related
I am working on a website which has a centered horizontal navigation bar. This bar has to have round corners on the end parts along with a hover effect. All of this is sort of working, but the issue is that the hover of the nav bar is overflowing the actual size of the bar. Along with that there is a slight white space between every element. As you can see in the following jsfiddle it doesn't look quite right. Another important note, is the fact that the navigation bar has to work with Bootstrap and the responsive functions. Which means nothing can be positioned absolute or float etc. Underneath I have also attached the html and css code.
HTML
<div class="navTopRight">
<ul class="naviTop">
<li class="first">Home</li>
<li>Item1</li>
<li>Item2</li>
<li>Item3</li>
<li class="last">Item4</li>
</ul>
</div>
CSS
.navTopRight{
text-align:center;
list-style-type: none;
margin-top: 30px;
padding: 0;
}
ul.naviTop li {
border:1px solid black;
display: inline;
overflow:hidden;
background-color:#003340;
}
.navTopRight li:last-child {
border-right: none;
}
.navTopRight li a{
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
display: inline;
}
ul.naviTop li a:hover {
background-color:#0099bf;
}
li.first{
border-top-left-radius:5px;
border-bottom-left-radius:5px;
}
li.last{
border-top-right-radius:5px;
border-bottom-right-radius:5px;
}
So i think you basicly had everything right here there is just some small details.. if I understood your question correctly you wanted to just fill your li background without the blue color overflowing everything.. This is easiest done by changing the padding:14px 16px; to padding:0px 16px;
after that you wanted the empty white space removed and that can be achieved pretty simple by changing your html codes structure like this:
<li class="first">Home</li
><li>Item1</li
><li>Item2</li
><li>Item3</li
><li class="last">Item4</li>
Notice how all the li tags ends just before the new one starts. Here is a working fiddle aswell! So no use of position or float needed!
https://jsfiddle.net/nfztdxr2/3/
If you want to fix overflow hover just change this part of your css
ul.naviTop li {
border:1px solid black;
display: inline; -> *display: inline-block;*
overflow:hidden;
background-color:#003340;
}
here is the result https://jsfiddle.net/nfztdxr2/
Let me know if that is what you try to achieve, or maybe there is another concern?
You can also set hover without "a"
ul.naviTop li:hover. {...}
It also looks better.
The problem is you have padding: 14px 16px; on .navTopRight li a, which is set to display: inline;. You can't give vertical margin/padding/etc to an inline element and have it affect the elements before/after it. So when you hover over those links, and the background color is applied, it looks really weird because the vertical padding becomes visible. Assuming that the navigation menu looks like you want it when the links aren't hovered, just remove that vertical (top/bottom 14px) padding from the links.
.navTopRight{
text-align:center;
list-style-type: none;
margin-top: 30px;
padding: 0;
}
ul.naviTop li {
border:1px solid black;
display: inline;
overflow:hidden;
background-color:#003340;
}
.navTopRight li:last-child {
border-right: none;
}
.navTopRight li a{
color: white;
text-align: center;
padding: 0 16px;
text-decoration: none;
}
ul.naviTop li a:hover {
background-color:#0099bf;
}
li.first{
border-top-left-radius:5px;
border-bottom-left-radius:5px;
}
li.last{
border-top-right-radius:5px;
border-bottom-right-radius:5px;
}
<div class="navTopRight">
<ul class="naviTop">
<li class="first">Home</li>
<li>Item1</li>
<li>Item2</li>
<li>Item3</li>
<li class="last">Item4</li>
</ul>
</div>
I have created a navbar using an unordered list. Here is my problem:
I cannot change the color of the text of the list items and for some reason I cannot click my links anymore (I was able to click them a while ago in development, no idea when they stopped working).
Here is what the items look like now:
http://gyazo.com/c089ed3f21368d4d2a1d91a52e129222.png
HTML:
<div class="grid_16 alpha" id="header">
<ul id="nav" class="grid_4 prefix_1">
<li id="nav_home">Home</li>
<li id="nav_home">News</li>
</ul>
</div>
CSS:
#nav {
color:white;
margin-top: 54px;
}
#nav li {
color: white;
display: inline;
}
#nav a:link {
font-family: ColaborateThinRegular;
font-size: 18px;
text-decoration: none;
background-color: #353535;
padding: 5px 20px;
margin-right: 15px;
color: white;
box-shadow: 1px 1px 3px #000;
}
Found it:
look at this jsFiddle. the problem with the coloring occured because you didn't specify a:visited as well as a:link so the color was purple.
The non-clickable problem.. has something to do with href="#" or some other code on your site that prevents it.. I've linked one of the buttons in jsFiddle to google and it keeps working after first click. Try it out
After visiting the link your style stops working. Try implementing this:
#nav a:visited {color: white;}
Always remember ids are Unique.
Ok this is simple thing. I firstly created a usual "Home" Button linking to the Home Page of the website, but the word "Home" looked too obvious. Hence I tried to insert an icon in place of that word, but its not fitting properly. I have tried some things in my css but its messing up the whole (used to create the navigation menu). The screenshot is attached. Please if someone can see whats wrong.
CSS:-
ul#menu
{
padding: 0px;
position: relative;
margin: 0;
}
ul#menu li
{
display: inline;
text-decoration:solid;
}
ul#menu li a
{
color: black;
background-color: #f5b45a;
padding: 10px 20px;
text-decoration: none;
line-height: 2.8em;
/*CSS3 properties*/
border-radius: 4px 4px 0 0;
}
HTML:-
<ul id="menu">
<li id="Home_Link"><img src="../../Image_Data/Home_Icon.ico" id="Home_Icon"/></li>
<li>MEN</li>
<li>WOMEN</li>
<li>KIDS</li>
<li>DESIGN!!</li>
With your current styles you will need to play around with the vertical-alignment and margins for the image, something like:
ul#menu li#Home_Link a img {
vertical-align: text-bottom;
margin-bottom: -5px;
}
As a side note, your use of ID's for elements is not recommended - use classes if needed. And reduce the specificity of your style declarations, e.g. .home-link img
Good Day.
I have a rather weird problem. And it is the first time I came across this.
I have an html/css menu (navigation menu) consisting of a ul list and anchor tags inside.
I am using border-bottom to highlight the menu on hover...
Now issue: I have 2 PC's on which I work - Both windows 7, different editions. Now in chrome and firefox, the menu shows fine. Also, I am using an IE only stylesheet to fix an alignment issue in IE. Look at Image1 to see my menu in the above mentioned browsers...
Now on my employer's PC(Windows 8) and on one of my colleagues PC's, also windows 8, the list items are shifted downwards - In Chrome. Also in IE(did not test in FF) - See Image2.
Why would the css display fine on my Chrome browsers but not on theirs. Everthing else on the pages displays fine between the browsers.
See my CSS defining the menu:
/THE CSS FOR THE MENU's PARENT divs/
#wrapper {
margin: 0 auto;
margin: 20px auto;
text-align: center;
width: 960px;
background: #f5f5f5; /*url('/images/bgMain.png') repeat center;*/
-moz-box-shadow:0 0 5px #999;
-webkit-box-shadow:0 0 5px #999;
box-shadow:0 0 5px #999;
}
#header {
margin: 0 auto;
/*background: url('/images/bg2.png') repeat-x center;*/
background: #eee;
text-align: center;
border-bottom: 6px solid #f3911f;
}
/**********************HERE THE MENU CSS STARTS***************/
#menuNav {
height: 100px;
text-align: center;
margin: 0 auto;
}
#menuNav ul {
list-style: none;
}
#menuNav ul li {
display: inline-block;
height: 100px;
line-height: 178px;
}
#menuNav ul li a {
padding: 0px 15px ;
font-family: 'Myriad Pro', 'Open Sans', Arial, sans-serif;
font-size: 22px;
color: #3c3b3d;
text-transform: uppercase;
border-bottom: 6px solid #f3911f;
text-decoration: none;
}
#menuNav ul li a.menuSmaller {
font-size: 18px;
padding-bottom: 2px;
}
#menuNav ul li a:hover {
border-bottom: 6px solid #7f2218;
}
#menuNav ul li a:focus {
border-bottom: 6px solid #7f2218;
}
/*LOGIN*/
#menuNav ul li#login, #menuNav ul li#logout{
float: right;
margin: 0px;
}
#menuNav ul li#login a, #menuNav ul li#logout a {
color: #7f2218;
}
/*Show hover effect on selected/active menu*/
.activeMenu {
border-bottom: 6px solid #7f2218 !important;
}
HTML:
<div id="wrapper" class="row-fluid">
<div id="header" class="row-fluid">
<div id="logo" class="span2">
<div><img src="images/logo.png" alt="CardVault Logo" /></div>
</div>
<div id="menuNav" class="span10">
<ul>
<li id="menuSignUp">Sign Up</li>
<li id="menuPricing">Pricing</li>
<li id="menuCorporate">Corporate</li>
<li id="menuAbout">About</li>
<li id="menuPartners">Partners</li>
<li id="login">Login</li>
</ul>
</div>
</div>
</div>
NOTE: I am using twitter bootstrap for the main layout, but I donlt think that that can cause any issues, it has never before...
Also, we both have the latest Chrome version...
Thank you!
The only times I have seen this happen was between different operating systems as well. In that case, it worked on Windows and Linux but not on Mac. The only common trait between the various occurrences was that the rendered menu font appeared different. And, yes, it cause me some headaches too.
You may also want to reset the page zoom by doing CTRL-0 just in case someone zoomed in and that screwing things up.
What did work is to adjust the padding of menu items until the one incorrect showed up properly and that reached both. Unfortunately, I could only do it by trial and error since the system in question did not have access to the development server.
I am pretty new at CSS but have been learning, doing my moms small business website to save her money but I'm having a little CSS trouble with my nav bar.
Basically if you go here: http://area25dallas.com/s and look at the nav bar, I'm having trouble with the il listing to have the images line up vertically (instead of aligning with the top which is what they currently do) with the text, also for some reason the images are going on top of each other instead of sitting next to each other (I don't want them in separate lists like the text links because the margins are too spread out).
I have been playing around with the CSS and also googled the hell out of this but still haven't found a solution. Is there any quick fix to this?
Thanks!
EDIT:
Here is the HTML and CSS blips though if you are using chrome I feel just inspecting the elements are the easiest way to see what's going on
<div id = "header">
<div class = "container">
<ul id = "main-menu">
<li class = "active">home</li>
<li>about</li>
<li>gallery</li>
<li>press</li>
<li>contact</li>
<li><img src="images/twitter_newbird_boxed_ white.png" />
<img src="images/Pinterest_Favicon white.png" /></li>
</ul>
</div>
</div>
and the CSS
#main-menu
{
float: right;
position:relative;
top:122px;
right:150px;
}
#main-menu li
{
float: left;
margin: 30px 12px 15px 12px;
padding:0;
height:23px;
list-style:none;
line-height:20px;
}
#main-menu li:hover, #main-menu li.active { background-position: 0 -23px;}
#main-menu li:hover a, #main-menu li.active a{
background-position: 100% -30px;
}
#main-menu li a
{
display:block;
padding:0px 15px 5px 10px;
font-size:17px;
color:#fff;
text-decoration:none;
}
The images are broken onto multiple lines because they reside inside an <a> tag which has been styled as a block level element. Change the style to something like:
#main-menu {
float: right;
position: relative;
right: 75px; /* Changed */
top: 122px;
}
#main-menu li a {
color: #fff;
display: inline-block; /* Changed */
font-size: 17px;
padding: 0 15px 5px 10px;
text-decoration: none;
}
/* New */
#main-menu li a img {
position: relative;
top: -10px;
}
The new rule at the bottom moves the images up a little bit. You can play around with your css and get the same results in a lot of different ways - I went with a method that didn't involve many changes to the existing work.
Thanks for the tips, guys, this helped me out too with images in my css navigation.
I'd also recommend some added code to alleviate your spacing issue ...
#main-menu li a img {
position:absolute;
background:inherit;
top: 0px;
margin-bottom:auto;
max-height: 33px;
}