Archived topic
Issues Customizing Theme
14 replies · Started by Chaz on November 22, 2020
I have been going around in circles trying to set up this theme for my site. I'm having several issues with the customizer not making the desired changes for me. My first issue is I cannot get my navigation menu to show up in my header. I've followed the directions in the documentation you guys provide. I've reset my settings, uninstalled plugins, tried altering all possible related settings for the header/navigation in the customizer, and I've tried creating an element for it. Basically everything I know to do with this theme isn't working. The navigation just doesn't show properly, and I can't get my logo to show up in the header either. It's very frustrating, after spending hundreds of dollars on more bloated themes that were difficult to work with I was under the impression this would be an easier setup. I don't want to build from scratch using elementor as I would prefer more consistency across my entire site via this theme. When I import site settings from the site library, I'm still not getting a proper nav menu/logo.
To be specific, I want my header and navigation similar to this; https://lonerwolf.com
Logo center, navigation hamburger on the left, and search on the right. I would ideally be using the mellow theme and customizing that. For my homepage I would probably use elementor but still want to keep the header in tact with GP.
Any help would be appreciated. I'm not sure what else to do at this point.
Hi there,
can you share a link to your site so i can see what you have so far ?
Hi there,
can you share a link to your site so i can see what you have so far ?
Hi David,
Thanks for responding. After going through all my settings and deleting everything completely including all elements and then reimporting mellow, I was able to get the nav menu to display. I believe the problem was I had an element set up as a blank canvas that was mistakenly applied site wide. However I'm still having issues customizing the appearance of the nav menu and my logo still won't show.
Here is the link; https://museofmercury.com
Thank you for your assistance.
Hi,
...However I’m still having issues customizing the appearance of the nav menu and my logo still won’t show.
Have you set your logo on Appearance > Customize > Site Identity? Make sure you have one set here.
After setting this, go to your Header Element and on the Site Header Tab, if its set to "Merge", you should be able to see a "Site Logo" and set your logo here too.
More about Header element here:
https://docs.generatepress.com/article/header-element-overview/
Hi Melvin,
Yes, I've set the logo in the customizer as well as in both elements. No logo is showing.
Can you clear and disable the Endurance page cache first?
Ok, Endurance Page Cache was cleared and disabled.
I was finally able to get the hamburger style menu to show after a few hours going back and forth messing with the customizer settings and elements. Now I need to center the logo and split up the search and menu icon to each side of the page. It's unclear how this is done and I'm having a hard time trying to make these changes. The only instructions I've found that seem to be relevant are these: https://docs.generatepress.com/article/centering-logo-mobile-header/
https://docs.generatepress.com/article/header-examples/
I tried following them but have not had any luck with this yet.
Now I need to center the logo and split up the search and menu icon to each side of the page.
In what order? Search on the left?
Yes search on the left is fine, though I would like to know how to set it either way in case I might want to change it in the future. Thanks.
Hmm can you try activating this option first?
https://docs.generatepress.com/article/navigation-as-a-header/
It should require much less CSS to achieve that layout with that option.
Let me know :)
Ok, I activated that option, though for some reason it removes the transparency of the logo which I'm not sure how to fix.
I'm seeing this CSS added:
.site-branding,
.navigation-branding {
background: rgba(0,0,0,0.8);
display: inline-block;
padding: 10px 30px;
border-radius: 3px;
transition: background 500ms ease;
}Do you need that? Looks like it's left over a site import.
If not can you remove it in Additional CSS field in the customizer first?
Yes, thanks for pointing that out. Removing it fixed the transparency issue.
Now try this CSS:
.main-navigation .navigation-branding {
position: absolute;
left: 50%;
top: 0;
transform: translateX(-50%);
}
.main-navigation .menu-bar-items {
flex: 1;
}
.main-navigation .menu-bar-item.slideout-toggle {
margin-left: auto;
}