Nav bar issue on load

Support
#1

Howdy, see

https://www.logoglo.com/new-home/

on 1st load, the nav bar loads at twice the height, then goes to normal, in a flash, but it looks kinda odd, is there a fix for this?

thanks.

#2

Hi @logoglo,

The issue is coming from custom CSS you have added.

.x-main.full {
    margin: 50px auto 0;
}

.masthead.masthead {
    height: 0;
}

First you have added above CSS for .x-main that adds 50px top margin. It creates the space above. Next you add CSS for masthead to remove that space. That’s the reason it is happening.

Hope this helps.

#3

Ok, but if I take that code out, the protfolio page and blog posts get hidden by the nav bar, anyway to fix this?

#4

Hi @logoglo ,

Try adding this custom CSS specific for those page instead:

.blog .x-container.max.width.main,
.page-id-6694 .x-container.max.width.main {
    margin-top: 100px; /*Adjust this value accordingly*/
}

Hope this helps.

#5

That worked thanks, how do I apply it to single portfolio items, the nav is getting cut off on mobile views:

#6

Hey @logoglo,

I checked your setup and you’ve added a custom CSS which is causing the issue. Please find and remove the following code from your custom CSS:

.blog .masthead.masthead, .page-id-6694 .masthead.masthead {
    height: 30px;
}

Don’t forget to clear all caches including your browser’s cache after removing the code. Let us know how this goes!

#7

Thats just adding to the porfolio parent page, I mean single porfolio items, I took that code out, and it has no effect on the single portfolio items on a mobile view…

#8

Other pages where the top is getting cut off by the menu:

#9

Hey, I got it sorted out, thanks!

#10

Crap, thought I had…

Nav bar is still flashing…

I need all pages to look the same, ie the same space up top on a mobile, I have added to those pages:

.page-id-7820 .masthead.masthead{height: 40px;}

and this to the portfolio items:

.single-x-portfolio .masthead.masthead{height: 50px;}

But that nav bar is still doing the original issue.

#11

Hello @logoglo,

The actual height of your navbar is 72 pixels. You do not need the custom css for the mast head height. Simply go to X > Theme Options > Header > Navbar and set the “Navbar Top Height” to 72 instead.

Hope this helps. Kindly let us know.

#12

I will check it out, but all this code, was added back in the day, because of the white gap above the content on a mobile view, then, because the content was blocked by the nav bar on the mobile…so, I delete all the masthead css and adjust in the customizer?

#13

Hello @logoglo,

Please delete the css first and the adjust the setting in the theme options.

If you are seeing empty space in smaller screens, then you add this custom css:

@media(max-width: 767px) {
    .page-id-7820 .masthead.masthead{
        height: 40px;
    }

    .single-x-portfolio .masthead.masthead{
        height: 50px;
    }
}

This css code will make sure that it will only affect the smaller screens and not the desktop screens.

Please let us know how it goes.

#14

Ok, as I suspected, taking out my code makes this happen, anyway to make sure it doesn’t? ie on every page on a mobile device, content sits below the nav bar?

UPDATE, I went through old code, deleteing as I went and found this effects it:

I went through some old code, and found this was effecting it:

    .x-main {
        margin-top: 0
    }

(but then adds the white gap)

If I delete this:

    .x-navbar {
        position: absolute;
        width: 100%
    }
    .x-navbar.x-navbar-fixed-top {
        position: fixed
    }
}

That gets rid of the white gap, but then my menu is not fixed on a mobile (which I want)

Can you help?

Thanks.

Thanks.

#15

Hi @logoglo,

Please check your entire custom CSS here, and address all found errors. One error here can mess up custom CSS succeeding that error.

If the issue persists, please remove all your custom CSS height on the header, and adjust the Navbar Top Height in the Theme Options > Header > Navbar, If you adjust this properly I don’t see the content being overlapped in the header unless you still have a custom height CSS that override this setting, or a negative margin on the content.

Thanks,

#16

I figured it out, changed the code to:

@media (max-width:979px) {
    .x-navbar-fixed-top {
        position: fixed!important
    }
    .x-main {
        margin-top: 0px
    }
}
#18

Ok, so it seams to be a conflict with wp-rocket, I will get in touch with them, sorry for all this back and forth.

#19

No worries at all. We’re glad to be of assistance.

#20

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.