BLACK FRIDAY BIGGEST SALE EVER!! Use coupon code BF33 to get 33% discount on all our products. Enjoy!

Changing mobile menu bar and content (Text) color

Home Forums Himalayas Free Changing mobile menu bar and content (Text) color

This topic contains 10 replies, has 2 voices, and was last updated by  info1200 1 week, 3 days ago.

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #1308132

    info1200
    Participant

    Hi guys

    I am a css newbie and thus have not much experience in css. Could you possibly help me with some settings and customization? I’d be really grateful!

    I use the Himalayas free page template on following site: http://www.swissdetektive.ch

    I have already customized the menu bar with the following css:

    .transparent .header-wrapper, .non-transparent .header-wrapper {
    background: #ffffff none repeat scroll 0 0;
    }
    
    #site-navigation .menu li a {
    color: #000000;
    }
    
    #site-navigation .menu li a {font-size:18px ; font-weight: bold ; }
    
    .transparent .header-wrapper.stick, .non-transparent .header-wrapper.stick {
    background: white none repeat scroll 0 0;
    }
    
    .header-wrapper.stick #site-navigation .menu li a, .header-wrapper.no-slider #site-navigation .menu li a {
    color: black;
    }

    However, when i visit the website on my cellphone or the a tablet, the font menu turns white and is not visible anymore (more precisely the menu icon on the mobile view). Do you know a solution? Maybe it is possible to manually select the mobile view menu and force the font color. Maybe you have another idea ?

    thank you very much for your support!
    best regards
    hurera

    #1308201

    ashishsthanp
    Moderator

    Hello, @info1200

    Can you send us the screenshot of the page pointing out the issue so that we can provide you an appropriate solution?

    Regards,
    ThemeGrill Support Team.

    #1308207

    info1200
    Participant

    Hi
    Thanks for your reply. Sure. Please take a look at the pictures in the folder (google drive):
    Pictures

    As ypu can see, the menu is white, and disappears as soon as i scroll down. i would like it to change the color and become black on the mobile view.

    can you help with this issue?

    best regards

    #1308491

    ashishsthanp
    Moderator

    Hello, @info1200

    This is the issue with our theme.
    So, it will be resolved in next update of the theme.

    Regards,
    ThemeGrill Support Team.

    #1310326

    info1200
    Participant

    Hey @ashishsthanp

    Thank you very much for your answer. I just saw that there has been a release on the Himalayas theme, currently vs.1.1.1

    I just checked my page on the mobile phone and still the header menu color does not change. it stays white, which makes it impossible for users to tap on it.

    Could you possibly help me with the css customization to change the color of the mobile menu?

    Thank you very much for your help! in case you have any questions please let me know.

    best regards

    • This reply was modified 5 months, 3 weeks ago by  info1200.
    #1310512

    ashishsthanp
    Moderator

    Hello again, @info1200

    You can add following code inside Appearance > Customize > Additional CSS :

    
    @media (max-width: 768px)
    {
    	.menu-toggle {
    		color: #333333;
    	}	
    }
    

    Change the color value ( #333333 ) as your requirement.

    Regards,
    ThemeGrill Support Team.

    #1310521

    info1200
    Participant

    Hey ashishsthanp

    Thank you very much for your reply and the help! it perfectly worked out to adjust the color of the mobile menu! great!

    I just realized another point after inserting the custom-css code. How can i adjust the color of the search icon (next to the mobile menu icon) in the mobile menu? Currently it stays white (default color) while the text turns the colored chosen in the css-code (in your example: #333333). Is there a specific css code you could help me with to change the search icon to the same color as the text of the mobile menu?

    Thank you very much for your help!

    Best regards

    #1310664

    ashishsthanp
    Moderator

    @info1200

    Add the following CSS:

    .search-icon {
      color: #333333;
    }

    Regards,
    ThemeGrill Support Team.

    #1333073

    info1200
    Participant

    Hey @ashishsthanp

    Thank you very much for your reply and the help! it perfectly worked out to adjust the color of the search icon! great!
    however, i just realized, that the search icon is changing its color when scrolling down the page. how can i make the search icon be the same color all the time, even when scrolling down the page?

    Thank you very much for your help!

    Best regards
    info1200

    #1333124

    ashishsthanp
    Moderator

    @info1200
    I just found that the issue is not in our theme. The issue has been occurred since you’ve set the background color white and our default color of the search icon on transparent setting is white. So, please the following CSS would fix the issue:

    .header-wrapper.stick .search-icon{
        color: #333;
    }

    If you get any issue later, feel free to ask again! We would really appreciate if you could provide us a review here: https://wordpress.org/support/theme/himalayas/reviews/?filter=5

    Thanks.

    #1333148

    info1200
    Participant

    Hey @ashishsthanp

    Thank you very much for your reply and the help! it perfectly worked out to adjust the color of the search icon even when scrolling! great!

    sure you have helped me with the page alot, i will consider a review!

    Best regards
    info1200

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

You must be logged in to reply to this topic.