Header builder - Issue on mobile

[Pbalazs89]

Hi there,

I’m trying to build a responsive header on my site, here:

http://www.coachingandfamily.com/

1. Thing is, when I switch to mobile or tablet view, the menu is positioned incorrectly. It’s like there is a placeholder for the other invisible bars. Any idea why this happens?

2. Also, another issue I noticed is that when I go on a subpage ->> Text in my header appears white and turns black only when I scroll - so it has different behavior then on the homepage, but there is nothing on the homepage in css that warrants this. Any idea why this happens?

3. Also, once the mobile menus are positioned correctly, can you help me with the css to make the background white in case of mobile and not transparent at the top of the page like in the case of desktop devices?

[nabeel]

Hi there,

Thanks for writing in!

1. I checked your site and I see you’re using an outdated version of Pro as many bugs have been fixed in the latest release, please update your theme and plugins to the latest version. You can find the latest version numbers here: (http://theme.co/changelog/) Then you can compare them to what’s installed on your site. If you find anything to be out of date, you can review our update guide.

2. I see you’ve custom code that’s making the menu items to turn black, please find and remove the following code:

.x-bar-fixed .x-menu > li > .x-anchor .x-anchor-text-primary {
    color: #292929;
}

Then adjust the Text Color via Header builder (see screenshot)

3. You can give your bar a class e.g mobile-background-color and then add the following code in the Theme Options > CSS:

@media screen and (max-width: 979px) {
    .mobile-background-color {
        background: #fff;
    }
}

Hope this helps!