This topic contains 17 replies, has 5 voices, and was last updated by  Sakin 2 years, 10 months ago.

Viewing 18 posts - 1 through 18 (of 18 total)
  • Author
    Posts
  • #53823

    sean
    Member

    Hello I have just switched my company’s webpage over to your catch responsive theme to make it more mobile friendly. But when I access our site via a mobile device the menu button in the top left corner is very hard to see as it is three gray lines on a darker background. I know the easy solution is to choose a lighter background to contract with it, but is there any way to change the coloring of those three bars that denote the menu? qes.com is the website

    #53831

    Sakin
    Keymaster

    @s.reinold: You can change the color code in the following css and then add it in “Appearance => Theme Options => Custom CSS” box:

    .mobile-menu-anchor a.genericon-menu, 
    .mobile-menu-anchor a.genericon-menu:hover {
        color: #404040;
    }
    #53832

    sean
    Member

    I entered this exact message in the customization css box and it did not change the coloring of the 3-bar drop down menu icon on the mobile site. I also tried changing the color code to see if that would effect the color, but that did not change the color of those 3-bars either.

    #53833

    Sakin
    Keymaster

    @s.reinold: Post in your site URL so that I can check in.

    #53834

    sean
    Member
    #53835

    Sakin
    Keymaster

    @s.reinold: I see that you have added the following css where you have missed dot in front
    mobile-menu-anchor a.genericon-menu,.mobile-menu-anchor a.genericon-menu:hover {color: #FFFFFF;}

    It should be as:
    .mobile-menu-anchor a.genericon-menu, .mobile-menu-anchor a.genericon-menu:hover { color: #fff; }

    #53838

    sean
    Member

    Great thank you very much that did the trick. One more quick question is there a simple way to put the word “Menu” above or below the 3-bars?

    #53839

    Sakin
    Keymaster

    @s.reinold: Yes, you can add the following css in “Appearance => Theme Options => Custom CSS” box:

    @media screen and (max-width: 990px) {
    .mobile-menu-anchor { display: block; }
    }
    #53842

    sean
    Member

    I copied that text into the CSS box and it did not produce a font with the 3-Bar icon.

    http://www.qes.com

    #53844

    Sakin
    Keymaster

    @s.reinold: Sorry replace the previous css I gave you with the following css:

    @media screen and (max-width: 990px) {
    .mobile-menu-text { display: block; }
    }
    #53846

    sean
    Member

    Great thank you very much!

    #53847

    Sakin
    Keymaster

    @s.reinold: Thanks for your appreciation. If you like Catch Responsive theme than you can help us by providing your review and rating here at https://wordpress.org/support/view/theme-reviews/catch-responsive?rate=5#postform .

    #54808

    fletchsc
    Member

    I am having this issue as well, that CSS fixed it, BUT I already had a bit of custom CSS in there to get rid of the search bar and icon, if I keep the CSS to get rid of the icon it gets rid of my hamburger menu on mobile as well =( the url is http://www.bocazoo.com This is the CSS I have
    .sidebar-header-right { display: none; }

    .mobile-menu-anchor a.genericon-menu, .mobile-menu-anchor a.genericon-menu:hover { color: #fff; }

    When I add – .genericon {display: none; } to get rid of the magnifying glass icon it gets rid of my hamburger menu as well – is there a fix for that? Thanks! Love your theme and your support – I’m going to have my client buy the pro version ASAP!

    #54848

    Sakin
    Keymaster

    @fletchsc: Sorry but I don’t get it what you want. Let me details of what you want then I can check you current css and give you the new one.

    #60013

    bethsobi
    Member

    I have a different issue with the menu. On my iPhone, I see two menu icons, one on the left and one on the right. The one on the left is working, the one on the right just brings up a big black box. How do I get rid of that?

    #60043

    Sakin
    Keymaster

    @bethsobi: Can you post in your site URL then I can check in your site issue.

    #84355

    MrManzarra
    Member

    Greetings Sakin, I am having the same issue as @bethsobi is having on the mobile version.

    The URL is the following: w3agency.pt

    Thank you for your time.

    #84387

    Sakin
    Keymaster

    @mrmanzarra: First, can you update your theme to latest version. Then can you go to “Appearance => Menus => Manage Locations” and let me know what you have added in there.

Viewing 18 posts - 1 through 18 (of 18 total)

The topic ‘Menu Bar on Mobile Site’ is closed to new replies.