Navigation branding, site title in mobile view

Hi Taner,

Try this CSS:

@media(max-width:768px){
.navigation-branding {
    display: none;
}

nav#mobile-header {
    margin-top: -50px;
}
}

Hello Ying,

Thank you for your response.

The above CSS looks great on mobile view but for some reason, I can see the hamburger menu but just can't select it.

Any ideas?

Thank you

Hi there,

can i suggest:

1. remove the block element you have to display the header/logo on mobile.
2. remove any CSS that is affecting the position of the Mobile Header.
3. in the Customizer > Layout > Header, add the logo to the Mobile Header logo.

Let me know when that is done, and ill provide the CSS to make that layout.

Hello David,

Thank you for getting back to me.

I've made the following changes as suggested:
1. Removed the mobile header from elements.
2. Removed the CSS effecting the mobile header.
I do have the following CSS code enabled but it doesn't seem to effect the mobile view.
/*move menu above content */
nav.nav-align-center {
z-index: 10;
position: relative;
}

3. I tried to add the logo to the mobile header in Customiser > Layout > Header but couldn't locate where to add the logo and there is the following message (This page is using a Site Header Element. Some of the options below may not apply) does this suggest that the mobile view logo should be added via Elements?

Thank you for your support.

In Customizer > Layout Header, set:

Mobile Header -> On
Branding Type -> Logo

And then the filed for the Logo should be displayed

Hi David,

Yes, this has worked.

Thank you very much for your support!

Taner

For the mobile header:

/* position logo in center */
#mobile-header #mega-menu-wrap-primary {
    order: -1;
}
/* set size of logo */
#mobile-header .site-logo img {
    height: 100px;
}

And i wasn't sure if you wanted the repeat background, if you do then you can do this:

#mobile-header:before {
    content: '';
    background-image: url(http://spindle-point.bolton.education/wp-content/uploads/2022/11/stars-bg-1.png);
    background-repeat: repeat;
    background-position: center center;
    background-size: 100px;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    opacity: 0.2;
}

Hello David,

Thank you for getting back to me with the CSS.

I'm not quite sure what I've done but I now have the white space behind the menu and if I add -25 pixels to the page header or the home page container it overlaps the menu.

I have added the following CCS added for the menu but as I mentioned above the menu appears to be under the content.
/*move menu above content*/
nav.nav-align-center {
z-index: 10;
position: relative;
}

My website

Would really appreciate your help.

Thank you
Taner

Hi Taner,

For clarity, can you take a screenshot of the issue?

Uploading Screenshots: https://docs.generatepress.com/article/using-the-premium-support-forum/#uploading-screenshots

Hi Fernando,

Please find the link to the screenshot below:
[url=https://postimg.cc/p90R4jpV][img]https://i.postimg.cc/bJPrGHPn/screenshot-spindle-point-bolton-education-2023-02-03-08-51-21.png[/img][/url]

Link to the website here

Thank you

Try this CSS:

#site-navigation {
    margin-bottom: -25px;
    position: relative;
    z-index: 1000;
}

And on pages where you have a Container Block ( hero ) at the top of the page, you can remove its -25px top margin

Hello David,

That's perfect thank you so much!

Taner

You're welcome