How to higlight page name in menu when viewing that page

tracyjfox · Member · Feb 18, 2015 at 4:30 pm
Copy link

Add topic to favorites
Hi

I have CSS Customization and wondered if there was anyway for the page name in the menu bar to be highlighted when you are on the page to help show where you are.

The menu pages currently have a different colour when you hover over them. I was hoping this colour could be displayed when the page is being viewed.

My site is tracyfox.co.uk and my theme is twenty eleven.

Many thanks in advance.

t r a c y

The blog I need help with is: (visible only to logged in users)
tracyjfox · Member · Feb 19, 2015 at 8:54 am
Copy link
Hi

Can anyone help with this?

Thanks

t r a c y
designsimply · Member · Feb 20, 2015 at 3:31 pm
Copy link
This example will make the background yellow for the current menu item, and the parent menu item if you’re on a subpage:
```
#access .current-menu-item > a,
#access .current-menu-ancestor > a,
#access .current_page_item > a,
#access .current_page_ancestor > a {
	background: yellow;
}
```
Adjust the background color code as needed or add whatever other properties you want there.
tracyjfox · Member · Feb 21, 2015 at 8:40 pm
Copy link
Thank you very much for help designsimply, it has worked a treat.

Kindest regards

Tracy
tracyjfox · Member · Feb 21, 2015 at 8:46 pm
Copy link
Hi

Just had a thought, instead of having a different colour background when the page is selected.

Is it possible to keep the same background colour with white text which is what happens when you hover over the page name?

Hope this makes sense!

Thanks

Tract
tracyjfox · Member · Feb 21, 2015 at 9:09 pm
Copy link
Hi

My default home page is Blog. I have just noticed that when you go to tracyfox.co.uk the page name Blog isn’t automatically highlighted to show that is where you ‘landed’ so to speak.

Is there a way of doing this?

Thanks

t r a c y
designsimply · Member · Feb 24, 2015 at 2:21 pm
Copy link
Is it possible to keep the same background colour with white text which is what happens when you hover over the page name?

Certainly. Instead of “background” you would want to use “color”

If you haven’t already seen it, I think a CSS tutorial would be helpful for figuring out the basics and these are two really good ones:
http://www.htmldog.com/guides/cssbeginner/
http://www.codecademy.com/courses/web-beginner-en-TlhFi/0/1?curriculum_id=50579fb998b470000202dc8b
tracyjfox · Member · Feb 24, 2015 at 2:50 pm
Copy link
After making the changes you kindly proivded, when you go to tracyfox.co.uk the page name Blog isn’t automatically highlighted to show that is where you ‘landed’ so to speak. My default home page is Blog.

Is there a way of making sure the page where you ‘land’ is highlighted?

Thanks

t r a c y
designsimply · Member · Feb 24, 2015 at 3:28 pm
Copy link
I have just noticed that when you go to tracyfox.co.uk the page name Blog isn’t automatically highlighted to show that is where you ‘landed’ so to speak.

Is there a way of doing this?

This part of the CSS from my example before usually covers a case like that: “#access .current-menu-item > a”

I noticed you have not selected a “Front page” in the Appearance > Customize > Static Front Page panel in the customize section. Can you try setting that option to see if it fixes the problem? Changing that setting means you may not actually need a separate blog page, since the home page is essentially shows the latest blog posts anyway, and you could probably select the “Your latest posts” option. If you’re not sure which setting is what you want, try adjusting the options in the Static Front Page panel to see how the options change the view on your blog and pick the one that is closest to what you want.
tracyjfox · Member · Feb 24, 2015 at 8:38 pm
Copy link
Hi designsimply

I did what you suggested and it is doing what I want it to.

Many thanks again for all your help

Kind regards

t r a c y

No items found.