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.
Related
I am trying to get a little graphic to designate which page the viewer is on with css, but it just won't highlight. Here is my code:
HTML:
<ul class="side-nav">
<li><span>Home</span></li>
<a href="http://www.cieloazulsantafe.com/sample-page.html"><li>
<span>Sample Page</span></li></a>
</ul>
CSS:
ul.side-nav span{
margin-left: 50px;
text-decoration: none;
color: #fff;
}
ul.side-nav a li{
background: url('http://cieloazulsantafe.com/wp-content/uploads/2014/03/nav-grad.png');
list-style: none;
height: 41px;
width: 250px;
line-height: 2.0;
text-decoration: none;
}
ul.side-nav a li:hover{
background: url('http://cieloazulsantafe.com/wp-content/uploads/2014/03/nav-grad1.png');
}
ul.side-nav a li.current-menu-item{
background: url('http://cieloazulsantafe.com/wp-content/uploads/2014/03/nav-grad1.png');
}
a{
text-decoration: none;
}
Seems straightforward, but I just can't get the background to change. I know its because its the li element, but I guess the "current-menu-item" order is wrong.
Url : http://cieloazulsantafe.com/nav-test.html
Thanks in advance.
You will have to name the body (give it an id) and the li tags, and refer to them respectively in your css. This is the easiest, pure css way.
HTML
<body id="home-body"> // ... on your home page
...
<body id="about-body"> // ... on your about page
Your nav
<li id="home-menu">Home</li>
<li id="about-menu">About</li>
CSS
body#home-body li#home-menu, body#about-body li#about-menu { // style of the active menu item }
You might want to have a look at my answer I provided on the following question: How can I use one Nav Bar code on multiple pages, BUT have the current page highlighted?
EDIT: This is the "pure css" way; but depending on your needs, there might be other ways down this road.
CHECK THIS FIDDLE http://jsfiddle.net/luckmattos/aN2ny/
Your HTML and CSS were broken:
HTML
<ul class="side-nav">
<li>Home</li>
<li class="current-menu-item">Current</li>
</ul>
<a> has to be inside the <li>, put the text properties on the <a>. Most important you forgot to put the class current-menu-item on the current <li>.
CSS
ul.side-nav {
margin-left: 50px;
text-decoration: none;
padding:0px;
list-style: none;
width: 250px;
}
ul.side-nav li{
padding:0px;
margin:0px;
display:block;
background: url('http://cieloazulsantafe.com/wp-content/uploads/2014/03/nav-grad.png');
height: 41px;
cursor:pointer;
}
ul.side-nav li a {
margin:0px;
display:block;
padding-left:50px;
text-decoration:none;
color: #fff;
height:41px;
line-height:41px;
}
ul.side-nav li a:hover,
ul.side-nav li.current-menu-item {
background: url('http://cieloazulsantafe.com/wp-content/uploads/2014/03/nav-grad1.png');
}
There are several minor changes, take a look at the code.
I'm fairly new to HTML/CSS coding, but I'm currently learning and developing a website. However, I'm sort of stuck on the process of my navigation bar. I managed to get a navigation bar to work, a horizontal one, with a working background image. The one thing I do have trouble with is having my navigation bar have drop down menus, like this: http://maxcdn.webappers.com/img/2008/10/free-css-drop-down-menu.png. Except without the extra sub-menus. Here's what I have so far:
HTML:
<div id="menu">
<ul>
<li>home</li>
<li>blank</li>
<li>about</li>
<li>site</li>
<li>contact</li>
</ul>
</div>
<div style="z-index:0;left:0;top:0;width:100%;height:100%">
<img src="unknown.jpg" style='width:100%;height:100%'/>
</div>
CSS:
#menu {
width: auto;
height: auto;
font-size: 16px;
font-family: Tahoma, Geneva, sans-serif;
font-weight: bold;
text-align: center;
text-shadow: 3px 2px 3px #333333;
background-color: #8AD9FF;
border-radius: 8px;
}
#menu ul {
height: auto;
padding: 8px 0px;
margin: 0px;
display: inline;
}
#menu li {
display: inline;
padding: 20px;
}
#menu a {
text-decoration: none;
color: #00F;
padding: 8px 8px 8px 8px;
}
#menu a:hover {
color: #F90;
background-color: #FFF;
}
Sorry if the question is relatively easy to answer, but I'm having trouble. I'm not sure how to change my HTML code into a code where visitors can hover their mouse over, for example, contact and they'll have the option to pick either Administrator or Other. Thank you.
You'll need to define the onmouseover event of the relevant elements and then, using some Javascript, append new elements somewhere in your menu div (or trigger their visibility). Not the easiest thing to start with for a beginner !
I am unable to add the active tab color to the menu code, can any body help me in this regard. I have collected the css horizontal code from form following tutorial:
http://www.freemenu.info/2013/04/menu.html
Apart from the hover color, I want another color for the active page. Please help me.
#menu a{
display: block; padding: 5px 10px;
width: 100px; border-right: 2px solid #ffffff;
text-decoration: none; border-left: 10px solid #1958b7;
color: #fff; background: #2175bc;
}
#menu a:hover{
color: pink; background: #2586d7;
border-left: 10px solid #1c64d1;
}
How
Create an active class for your links (just add the class to your :hover CSS):
#menu a:hover,
#menu a.active {
....
}
Now you you have links like: Link
Was that the question?
You can do that with javascript/JQuery, (API Reference):
$('#menu a').click(function(){
$(this).addClass('selected');
//Remove class for other menu items.
});
and then more CSS:
#menu a.selected{
background: red;
}
this is what I used to do:
<li class="active">HOME</li>
<li>ABOUT</li>
<li>PORTFOLIO</li>
<li>CONTACT</li>
change that active for all the pages.
Then in my CSS:
.active{
//Your code goes here
}
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
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.