[Support request] centered menu walking on logo in firefox browser at mobile sizes

[Peter]

Ref: bob-cheryl.ptest2.com, BeaverBuilder and GP Premium, I can provide you with credentials to the backend

Dear Support,
I am not clear on exactly what problem my developer is describing with respect to GeneratePress. So I am going to simply cut and paste in her comments. See below.
—

OK, there is something really messed up with the [GeneratePress] theme and Firefox… looks like we will need to write to the [GeneratePress] developer… The centered menu is not centered on the entire width but between the left edge and the left side of the header widget.

If you want me [my WP developer] to write to them [GeneratePress developer], please paste their email here, if not, then copy and paste the info above to them. I have the menu adjusted horizontally below the logo image, so at least it slides under it rather than “walking” over it. but the CSS works on all devices again and home and safari, just not well [on] Firefox

—
Peter Sale

[Tom]

I’m not really clear what the original issue was? What’s the problem you’re having?

[Peter]

Hi Tom,
Sorry for the confusion. My developer has clarified her problem description. See below:

… The centered menu is not centered on the entire width but is centered between the left edge [of the screen] and the left side of the header widget [(which is on the right side of the site)].

This issue can be seen when bob-cheryl.ptest2.com is viewed on a 1024 pixel wide screen on a Firefox browser.

This issue does NOT occur when bob-cheryl.ptest2.com is viewed on a 1024 pixel wide screen on any other browser, say a Chrome browser.

Hopefully, this clears up my confusing support request?
–
Peter

[Peter]

Hi Tom,
I just now received further clarification from my developer. She says she is unable to center the menu in Firefox when selecting the menu and choosing the align center option in the customizer.
–
Peter

[Tom]

The header widget is pushing the menu to the left. She can test by removing the header widget.

Best thing to do here is to separate the header from the navigation – place it below the header, that’s how you’ll get the two tone colors.

Then using negative margin to push the logo and header widget down onto the navigation bar.

[Peter]

Hi Tom,
Many thanks for your response. Please note that this issue is only present when viewing bob-cheryl.ptest2.com on the Firefox browser. Other browsers display this page as you would expect. Why is that?

[Tom]

Browsers render things differently. In this case, Firefox actually has it right. The header widget is a part of the row, so it’s pushing the navigation to the left.

The method I explained above is a much better way to achieve the layout in my opinion.

[Peter]

Hi Tom,
This is Kerry (the developer).

The header widget is pushing the menu to the left. She can test by removing the header widget.

Yes. Agreed. This is the problem and why we wrote. (Please see next comment)

Best thing to do here is to separate the header from the navigation – place it below the header, that’s how you’ll get the two tone colors.

The navigation is already below the header… Navigation alignment in the customizer is set to Below Header
I tried changing the inner navigation width to full and it still renders incorrectly in Firefox.
The two tone colors right now is done with CSS using a box shadow, not background color.

Then using negative margin to push the logo and header widget down onto the navigation bar.

I had originally had some negative margin on the Navigation Menu bar which also worked well, however Firefox did not recognize the negative margin and it was still not a good resolution.

Working with WP we know there are a million ways to do something and have the same result. In this case, I would be happy to attempt what you suggest but I think I already have regarding separating the header from the navigation and hence us reaching out. Now, I am new to using your theme and it’s likely I missed a setting someplace, so if there is something I am missing please let us know.

PS is there a way to add a cc email (kerrycarron@gmail.com) to this ticket so I can get copies? Or a way I can get a support account of my own?

[Tom]

I would remove this CSS:

.main-nav .sf-menu {
    margin-top: -2em;
    margin-bottom: .5em;
    margin-left: 0;
}

The increase the height of your navigation bar to however tall you want that darker background to be.

The one your .site-logo and .header-widget elements (remove the line breaks from the header widget, use CSS), add something like this:

position: relative;
bottom: -20px;

That way the header is one color, the navigation is another, and the logo/header widget are pushed down on top of the navigation.

[Author]

Posts