[Resolved] Navigation branding, site title in mobile view

[Taner]

Hello,

Just wondering how I can hide the navigation branding site title and the white background on mobile view.

I tried adding the following CSS but it made it really difficult to use the site menu on mobile.
Please see the image link below:

link to website
Spindle Point

Any suggestion would be appreciated.

Thanks

[Ying]

Hi Taner,

Try this CSS:

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

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

[Taner]

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

[David]

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.

[Taner]

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.

[David]

In Customizer > Layout Header, set:

Mobile Header -> On
Branding Type -> Logo

And then the filed for the Logo should be displayed

[Taner]

Hi David,

Yes, this has worked.

Thank you very much for your support!

Taner

[David]

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;
}

[Taner]

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

[Fernando]

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

[Taner]

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

[David]

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

[Taner]

Hello David,

That’s perfect thank you so much!

Taner

[David]

You’re welcome

[Author]

Posts