[husker]

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/

[husker]

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/

[Mahesh]

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

[husker]

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/

[Mahesh]

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

[husker]

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

[husker]

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.

[Mahesh]

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

[Mahesh]

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

[husker]

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

[Mahesh]

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

[husker]

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

Thanks

Brian

[Mahesh]

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

[husker]

Yes I did the update with no problems.

Brian

[Author]

Posts