Tagged: :hover, active, menu, Navigation
- This topic has 4 replies, 3 voices, and was last updated 9 years, 8 months ago by
Sebastian.
| Author | Posts |
|---|---|
 webmint
August 29, 2014 at 12:43 pm
|
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. 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
August 29, 2014 at 3:54 pm
|
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
March 18, 2015 at 9:01 pm
|
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 How do I get those colours changed at 1? Won’t let me change it there. |
|
Sebastian
March 19, 2015 at 3:52 am
|
Hi there, The [mix] computed value tells you two things:
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:
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
March 19, 2015 at 5:00 am
|
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:
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, |
