Change menu link color only on responsive menu (Burger Menu)

My site is now ready except for one little thing I can't fix.
I have a transparent top bar menu with white links.
For the sticky header I chose white background and black links.
Now when the page is responsive and gets the burger menu toggle the background color of this menu is white and since my link color is also white you can't see anything. As soon as I scroll down and the sticky header is active, the link color changes to black.

So how can I change the link color for smaller devices with the burger menu to black without changing it for desktop sizes?

if it helps the page is http://friseur-empl.de/homedraft/

Comments

  • and maybe as an additional info:
    When the screen size is more narrow and the sticky header is there from the start [logo in the middle - menu toggle right] the links are black.
    It's just for this appearance in between, where the top bar is transparent, logo on the left and the burger menu toggle on the right
  • Hi,
    That link you send isn't working, and index page isn't made with BeTheme.
    We can't help you with not our themes.
    Thanks.

  • Yes the index page is not betheme but the new one is. the link I sent you is the draft for the new homepage which is made with be theme. I apparently don't have the permission to send you a message so I can't provide you with credentials.

    But maybe you could try to answer my question anyway?
  • All I can do without taking a look at your website is redirecting you to :
    BeTheme > Theme Options > Responsive > Header. There you can enable the transparent header for device.
    and BeTheme > Theme Options > Colors  > Header > Top bar left background to change the color on mobile

    Thanks.
  • Hi Pablo. These options don't help me it's about the font color in the dropdown menu that appears from the burger menu -> see picture
    image

    You should have received credentials over the envato contact form so you can check it out

    cheers
  • We have logged in to this page and the drop down menu colors are black, not white like in your screenshot. Please disable cache plugins and clear your browser cache, it is most likely caused by it.
  • Hi Brian - that's because I changed it to black for now so the site is usable (now online). but white font in the transparent top bar would be better in general. And that's where the described problem comes in because on tablet and mobile devices the menu background is also white. And when I change the tobbar left color to black it doesn't work with my sticky bar settings anymore (would be black on black then). So I was looking for an option to change the font color for mobile devices to black without interfering with the desktop settings
  • What you need to do it this:
    1. Change the font color for the menu items to white.
    2. Since you have a transparent header, go to theme options>colors>header and change the top_bar_left background to black
    This way you will have white text on both mobile and desktop versions.
    thanks
Sign In or Register to comment.
This website uses cookies

We use cookies to personalise content and ads, to provide social media features and to analyse our traffic. We also share information about your use of our site with our social media, advertising and analytics partners who may combine it with other information that you’ve provided to them or that they’ve collected from your use of their services.

Cookies are small text files that can be used by websites to make a user's experience more efficient.

The law states that we can store cookies on your device if they are strictly necessary for the operation of this site. For all other types of cookies we need your permission. This means that cookies which are categorized as necessary, are processed based on GDPR Art. 6 (1) (f). All other cookies, meaning those from the categories preferences and marketing, are processed based on GDPR Art. 6 (1) (a) GDPR.

This site uses different types of cookies. Some cookies are placed by third party services that appear on our pages.

You can at any time change or withdraw your consent from the Cookie Declaration on our website.

Learn more about who we are, how you can contact us and how we process personal data in our Privacy Policy.

Please state your consent ID and date when you contact us regarding your consent.