Css nav bar

HTML & CSS
1

Hi,

I am trying to create a nav bar, have almost got it working as i want, but cannot get the a:hover and active links working…

This is the page:

http://www.enticeoutfits.co.uk/kebabhouse/

If you hover over the link it doesn’t work, this is how it should be:

http://www.enticeoutfits.co.uk/kebabhouse/takeaway.jpg

Can someone help? Or provide an example of how i can do this?

2

Hi,

I couldn’t do that as i had an includes folder with the header including the menu…

So what i did is did an IF statement:


if($_SERVER['PHP_SELF'] == "homepage"):
//show as selected...
endif;

This worked for me :smiley: But it was your post that made me figure this out… So thanks :wink:

3

You just need to make sure that on each page, you put class=“current_page_item” on the menu item for the current page. No need for Javascript at all.

4

Ok, i think i’ve managed to do it, but need to fix one final thing. If you visit the page now:

http://www.enticeoutfits.co.uk/kebabhouse/

You will see the “home” link will be selected by default. What i need to do it when i click on a different link it makes it keeps it highlighted…

Any ideas how i can do this? I did try doing it with JavaScript here:

http://www.enticeoutfits.co.uk/kebabhouse/js/links.js

But as i will be leaving the page, i don’t think it will work…

:confused:

5

Hmm,

I have tried doing this but i don’t think i’m doing it properly…

This is the page:

http://www.enticeoutfits.co.uk/kebabhouse/

If you look at this:

http://www.enticeoutfits.co.uk/kebabhouse/takeaway.jpg

I simply want to have the link highlighted on hover, but when i put my mouse over the link currently it looks wrong :confused:

Can anyone help?

Thanks

6

I imagine you want the hover area to just be the text. So prob on hover increase height or padding on anchor.

7

set display block for links. Remove padding from parent list element and define that padding for a. It shoud do the trick. You’ll need to work then on other header element like the logo. I made those changes with firebug and the result has move it a little bit.