[s-design]

Hello,

Everything with this theme is really great and working well. I have a styling question.

Is there a way to style the mobile mini menu to indicate which item is the current page? I am aware that the mobile mini menu heading name changes depending on the page.

The way the full-size (desktop) drop-down menu items indicate the current page by displaying a black background is how I would like the current page mini menu items to be styled.

I’m working local so I can’t provide a link to my site.

Thank you for any help you can provide.

[Sakin]

@s-design: Can you post in your site URL and let me know what you want to change to current page in mobile menu.

[s-design]

I would like to change the background color of the link that is the current page.

Example: When you are on the education page:
http://dev1.jhamtsegatsal.org/life/education/
and the screen is desktop size the color behind the current page link in the drop-down menu is black.

#header-menu .menu .current-menu-item > a,
#header-menu .menu .current_page_item > a,{
    background-color: #000;
}

But, when the screen size is mobile, I would like the background color to be the same color in the mobile menu for the current page link in the mini menu drop-down, to indicate what item is the current page.

Does that make sense?

I have tried different ways to style it to try and make it happen, but can’t seem to figure it out. If you can tell me the code for the @media (max-width: 480px) I can do it for the other @media.

Thank you for your help.

[Sakin]

@s-design: Oh sorry this is not possible with this code of menu. But there is one trick as you are just using Primary Menu.

Just go to “Appearance => Theme Options => Responsive Design”. Then uncheck “Enable Footer Menu in Mobile Deveices?” and Save Changes. Then this will display the page name in the Place of Main Menu.

[s-design]

Hi Sakin,

So are you saying there is no way to do what I am trying to do with CSS? If no, is there some code I could add/edit in the catcheverest-menu.min.js file in my child theme that could make this work?

[Sakin]

@s-design: I gave you the simple solution as you don’t have footer menu. So, unchecking it will not effect your site at all.

[Author]

Posts