Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • February 28, 2016 at 4:18 am #86422
    husker
    Participant

    I modified background and color in CSS navigation for menu and sub menu items and looks good on Desktop.

    How do i get background color for sub menus on ipad or iphone to show same colors. #cc0c2f for background. Either hover or default?

    http://bayareahuskers.org/wp/

    February 28, 2016 at 6:05 am #86425
    husker
    Participant

    I got the ipad mobile to work but still not sure how to affect the iPhone mobile menu.

    All pages show grey with black font no matter what I try when you click menu.

    http://bayareahuskers.org/wp/

    February 28, 2016 at 9:53 am #86435
    Mahesh
    Participant

    Hi @husker,

    You’ll need to add some style for mobile menu too. Go to “Dashboard=> Appearance=> Customize=> Theme Options=> Custom CSS” box and add the following CSS:

    #header-left-nav {
    background-color: #cc0c2f;
}
#header-left-nav li.menu-item > a {
    color: #fff;
}
  
#header-left-nav li.menu-item ul.sub-menu li > a {
    color: #000;
}
  
#header-left-nav li.menu-item ul.sub-menu li {
      background-color: #bbbbbb;
}
  
#header-left-nav li.menu-item:hover > a, #header-left-nav li.menu-item ul.sub-menu li:hover > a {
      background-color: #fff;
      color: #cc0c2f;
}

    Regards,
    Mahesh

    March 1, 2016 at 11:38 am #86573
    husker
    Participant

    I used the code and was able to play around and get all phone menu pages to be red.

    I however can not get the text color to change using color: #fff;

    It stays black. I tried adding color to several lines and no change in menu text color.

    Is something missing?

    http://bayareahuskers.org/wp/

    March 1, 2016 at 12:34 pm #86581
    Mahesh
    Participant

    Hi @husker,

    In the above code, the following line will make your menu link #fff

    #header-left-nav li.menu-item > a {
    color: #fff;
}

    And following line will make your sub menu link #bbbbbb

    #header-left-nav li.menu-item ul.sub-menu li {
      background-color: #bbbbbb;
}

    In your site, I didn’t see the above styles. May be that is why the color is not #fff.

    Regards,
    Mahesh

    March 2, 2016 at 8:05 am #86636
    husker
    Participant

    I got the colors to work.

    There may be an issue with the mobile menu. Try and access the last Menu Item – 2015 Past Events om my page with your phone.

    http://bayareahuskers.org/wp/

    I have a hard time scrolling down to that last menu item on the Iphone? Is it me or is there an issue?

    There is parent Events and child Upcoming Events and 2015 Past Events.

    Brian

    March 2, 2016 at 8:52 am #86637
    husker
    Participant

    Can we resize the mobile menu so it does not extend to the bottom of the iphone? Font could be smaller and still be seen.

    March 2, 2016 at 1:08 pm #86647
    Mahesh
    Participant

    Hi @husker,

    I checked the menu in mobile and it seems to be issue in iPhone only. I tried the site with android too but it worked normally. The issue seem to be due to the Sidr jquery plugin, that the theme uses for mobile menu. We are trying to resolve the issue.
    If you want to make font size smaller, go to “Dashboard=> Appearance=> Customize=> Theme Options=> Custom CSS” and add the following CSS:

    .sidr ul li, .sidr ul li:hover {
    line-height: 35px;
}
.sidr ul li ul li, .sidr ul li ul li:hover {
    line-height: 30px;
}
.sidr {
	font-size: 12px;
}

    In the above CSS, I’ve reduced the spacing for the menu too.

    Regards,
    Mahesh

    March 2, 2016 at 2:48 pm #86651
    Mahesh
    Participant

    Hi @husker,

    Use following CSS for scroll issue.
    body.sidr-open { position: fixed !important; }
    Note: Currently in your site, you have menu in the right position and you have to scroll to right to close the menu, after adding above CSS, you won’t be able to scroll the page when the menu is open (only the menu is scrollable). So please move the menu icon from right to left.
    Let me know if any problem.

    Regards,
    Mahesh

    March 3, 2016 at 5:28 am #86691
    husker
    Participant

    I did move mobile menu to the left. Much better.

    I did try the scroll issue code and it helped see the bottom menu page but Menu Labels disappear and come back as you scroll.

    I will leave code in so you can see as I have not made site live yet.

    Brian

    March 3, 2016 at 4:15 pm #86705
    Mahesh
    Participant

    Hi @husker,

    The issue has been fixed in the updated version Catch Responsive 3.4 and is now available in WordPress.org. Please update to the latest version and remove the above CSS fixation.
    Thanks for letting us know the issue.

    Regards,
    Mahesh

    March 3, 2016 at 8:42 pm #86713
    husker
    Participant

    When it is made available in WordPress I will update. It is not there yet?

    Thanks

    Brian

    March 4, 2016 at 10:23 am #86749
    Mahesh
    Participant

    Hi @husker,

    Just to let you know that the updated version ( Catch Responsive 2.4 ) is now available in WordPress.org. Its 2.4 not 3.4, sorry for the typo.
    Have a nice day!

    Regards,
    Mahesh

    March 4, 2016 at 11:29 am #86750
    husker
    Participant

    Yes I did the update with no problems.

    Brian

  • Author
    Posts
Viewing 14 posts - 1 through 14 (of 14 total)
  • The topic ‘Menu and Child Menu background Color Across Devices’ is closed to new replies.