Menu Active and Hover link behaviour

This topic contains 4 replies, has 3 voices, and was last updated by  Sebastian 7 years, 6 months ago.

Author Posts

webmint

Notice: this information was written when Microthemer version 2 was current. On Dec 26th, 2014 version 3 was released with a completely new interface. Some of the information may be redundant, but as much of the functionality remains the same in version 3 we haven't deleted this post.

Hello to the Themeover team and all the forum members.
Firstly, great plugin, thank you very much for the great work!!
I am having a problem however with regards to navigation/menu styling.
Just some background- I am running the latest versions of:
Wordpress, Ultimatum Theme, Microthemer and i am testing on the current versions of Chrome, IE and Android browser. The issue is on my test site – http://www.ruby.demo.webmint.co.za/

1. When i set my menu link hover background to a colour (i.e. green) using this selector (div#col-1-1 ul#menu-navbar-1 a:hover) it works fine. But when i set the menu link active state to another colour (i.e. pink) using the selector (div#col-1-1 ul#menu-navbar-1 a:active), it does not work. Please help me resolve this as it currently means that menu items for active pages look the same as inactive pages.

2. I am also battling to find selectors for dropdown parts of my navigation. This means that all my drop down menu items are currently generic looking and different from the styling of the navbar. Please help.

3. I am also battling to style my whole navbar, i tried a number of selectors with no success. It just remains light grey with a dark grey border. Please help.

Thank you.


Sebastian

Hi Webmint,

I’m getting a 500 internal error when I try to view your website: https://docs.google.com/a/themeover.com/file/d/0B2vCpmXg7SjlZElkME11a2R5TEk/edit?usp=drivesdk. If you could make this accessible for me it will help me provide answers to your questions.

Hint, with question 1 I think you’re misunderstanding what the :active selector does. Styles you apply when using “:active” in the selector will only apply during the very brief moment when the users is clicking the element, with their finger pressed down. WordPress probably creates a class called .current-page-item or something along those lines. If you click the tab of the currently active page Microthemer’s selector wizard should find it.

Cheers,

Sebastian


prettigdesign

Have the same problem with Main Links editing. If I select the Current page under the Color option I see {mix} and this

Page Analysis

N VALUE
1 #2EA3F2
2 #666666

How do I get those colours changed at 1? Won’t let me change it there.


Sebastian

Hi there,

The [mix] computed value tells you two things:

  1. Firstly, that your selector targets more than one element on the current page – in your case more than one main menu link
  2. Secondly, due to the way styles have been set in your theme, these multiple menu items do not all share the same color.

This reporting information is useful for alerting you to the fact that if you enter a new value, it will apply to all elements your selector targets. This may not always be desirable so it’s useful to know this in advance. This appears to be true for you. So the solution is to create a separate selector for each element that you want to style differently.

If you hover your mouse over the N1 value (#2EA3F2) Microthemer will highlight it on the page and scroll to it if it isn’t currently in view. That will show you where it is. Double-click the menu item, and bring up the advanced options and go to the targeting tab using the ‘Advanced options’ link at the top right of the wizard (if you haven’t done this already). You might want to drag the slider down a bit. I’m guessing here because I haven’t seen the site you’re working on, but it sounds possible that the different color is used to show that a menu item relates to the current page. If so, you would look for the selector that has this in it somewhere:

li.current_page_item

Targeting this selector by dragging the slider down to it would be better than using the ID which may be what Microthemer suggests by default (e.g. a selector that has something like this in it ‘#menu-item-3031’). This is because the id will remain constant but the ‘.current_page_item class’ will change in accordance with the current page.

Once you’ve created a separate selector you can apply a different color.

My advice here is partly based on conjecture, so please feel free to post a link to your site if you need instructions that are more specific to your website (without the guess work).

Cheers,
Sebastian


Sebastian

PS you mentioned that you wanted a hover state in your tutorial request. When searching for the selector that contains ‘li.current_page_item’ also look for ‘:hover’ at the end. If a selector has ‘:hover’ at the end, the styles will only take effect when the user hovers their mouse over the target elements. So the selector might look something like this:

li.current_page_item a:hover

You can manually add ‘:hover’ to the end of any CSS selector code yourself by the way. Click the name of the current selector in the top toolbar to reveal the editing options for the selector.

Cheers,
Sebastian

You must login or register to reply to this topic.