- This topic has 13 replies, 4 voices, and was last updated 3 years, 3 months ago by
.
-
Posts
-
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 PointAny suggestion would be appreciated.
Thanks
Customer Support
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
Customer Support
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->LogoAnd 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;
}Would really appreciate your help.
Thank you
TanerCustomer Support
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]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
- You must be logged in to reply to this topic.
