Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • February 22, 2014 at 6:02 pm #20626
    s-design
    Member

    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.

    February 23, 2014 at 12:54 am #20633
    Sakin
    Keymaster

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

    February 23, 2014 at 8:18 am #20645
    s-design
    Member

    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.

    February 23, 2014 at 9:42 am #20649
    Sakin
    Keymaster

    @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.

    February 25, 2014 at 9:46 pm #20738
    s-design
    Member

    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?

    February 25, 2014 at 10:47 pm #20739
    Sakin
    Keymaster

    @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
Viewing 6 posts - 1 through 6 (of 6 total)
  • The topic ‘Change Current Page Mini Menu Styling’ is closed to new replies.