[Resolved] Split Template, WooCommerce, Search in Navigation, Mobile Logo Size

[Tom]

Glad I could help 🙂

[Simon Burley]

Hi Tom,

I’m really sorry to ask you about this again, but I just cleared my cache and refreshed the page and now the navigation in the header isn’t showing as it should. It’s not ‘splitting’ around the logo anymore at higher resolutions.
I wonder if we had cached versions of the pages previously and were seeing them? I haven’t changed any code and have only added a tiny bit of css at the bottom of the current css (to add shadows to some text). I updated three plugins today but have tried deactivating the plugins and the issue still remains. This is a screenshot of the problem with the menu not ‘splitting’ . . .

https://snag.gy/k1BJwb.jpg

This is the full ‘additional’ css in the Customiser . . .

/* GeneratePress Site CSS */

.inside-header {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}

.header-widget {
order: 10;
overflow: visible;
}

.nav-float-right .header-widget {
top: auto;
}

.nav-float-right .header-widget .widget {
padding-bottom: 0;
}

.site-branding,
.site-logo {
position: absolute;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
z-index: 200;
}

button,
html input[type=”button”], input[type=”reset”], input[type=”submit”], a.button,
a.button:visited,
a.wp-block-button__link:not(.has-background) {
border: 1px solid transparent;
}

button.ghost,
html input[type=”button”].ghost, input[type=”reset”].ghost, input[type=”submit”].ghost, a.button.ghost,
a.button.ghost:visited,
a.wp-block-button__link.ghost:not(.has-background) {
background: transparent;
color: inherit;
border-color: inherit;
}

button.ghost:hover,
html input[type=”button”].ghost:hover, input[type=”reset”].ghost:hover, input[type=”submit”].ghost:hover, a.button.ghost:hover,
a.wp-block-button__link.ghost:not(.has-background):hover {
background: transparent;
color: #1e73be;
}

.hero-buttons > * {
margin: 10px;
}

.widget-area .widget_search {
padding: 0;
}

#mobile-header .mobile-bar-items {
-webkit-box-ordinal-group: 5;
-ms-flex-order: 4;
order: 4;
margin-left: auto;
}

.no-sidebar .inside-article > *,
.no-sidebar #comments,
.no-sidebar .nav-links {
max-width: 700px;
margin-left: auto;
margin-right: auto;
}

.no-sidebar .generate-columns-container .inside-article > * {
max-width: none;
}

.nav-links > * {
padding: 5px 15px;
border-width: 1px;
border-style: solid;
border-color: inherit;
}

.entry-content .happyforms-flex {
padding: 0;
}

#site-navigation {
float: none;
width: 100%;
}

.main-navigation:not(.slideout-navigation):not(.mobile-header-navigation) .main-nav > ul {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}

.main-navigation .menu-item-separator {
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
}

.main-navigation .menu-item-separator a {
font-size: 0;
background: transparent !important;
}

.slideout-navigation .menu-item-separator,
.main-navigation.toggled .menu-item-separator{
display: none !important;
}

@media (max-width: 768px) {
.inside-header>:not(:last-child):not(.main-navigation) {
margin-bottom: 0;
}

}

@media (min-width: 769px) and (max-width: 1240px) {
.site-logo {
position: relative;
left: 0;
-webkit-transform: none;
-ms-transform: none;
transform: none;
}

.menu-item-separator {
display: none;
}

.inside-header {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}

#site-navigation {
width: auto;
}

.main-navigation .main-nav ul li a {
font-size: 13px;
padding: 0 10px;
}

.menu-item-has-children .dropdown-menu-toggle {
padding-right: 10px;
}
}

.text-shadow-white .inside-page-hero {
text-shadow: 2px 2px 9px rgba(255,255,255,1);
}

.text-shadow .inside-page-hero {
text-shadow: 2px 2px 9px rgba(0,0,0,1);
}

/* End GeneratePress Site CSS */

The only other area I’ve been in is the Elements section to add the Element Class for the text-shadow in the ‘Home Hero’ and to add the background image for the ‘Home Hero’. So I’ve not really changed anything that I can think of to cause the issue.

Thank you again for your help. I promise to be quiet after this.

All The Best,

Simon

[Simon Burley]

Sorry Tom,

Hold that thought for a moment, I just looked in the Menu in the admin area and the menu item separator doesn’t seem to be there anymore. Am I correct in thinking it was the same in the Split template as on this page . . .

https://docs.generatepress.com/article/centering-logo-navigation/

?

I’m going to try adding that again now and see if it works. But am very confused as to why it has vanished. I’ll let you know what happens.

[Simon Burley]

PHEW! That seems to have fixed it. Have you had this issue come up before? I’m at a loss as to why the separator would suddenly vanish.

Thank you,

Simon

[Leo]

Sounds like it maybe a caching issue or something not saved correctly?

Have not heard this reported before…

Glad you figured out though 🙂

[Simon Burley]

Thanks Leo :o)

[Leo]

No problem 🙂

[Simon Burley]

Hi Tom,

I hope all is well with you.

Sorry to revisit this topic but just to let you know that the site is now complete and online. This is a link to it . . . https://goo.gl/gfeh2L
. . . I’m very pleased with how it has turned out and thank you again for your help.

Having changed the items in the main menu a number of times, the old issue with the strange formatting at certain screen sizes has reappeared (in this case the drop down arrows) I’ve had a go at changing the CSS you sent previously (basically by changing the media queries), but I’m stumped. Could you let me know what I need to do to get the menus behaving like we had them with the code above please. The problem is happening between approximately 769px width and 816px width. Here’s a screen shot . . . https://snag.gy/hHYNdp.jpg

I just need the hamburger menu to appear at the point where the dropdown arrow problem is happening, i.e. around the 816px mark or so.

Thanks Tom,

All the Best,

Simon

[Tom]

You can get the mobile header to appear sooner with this CSS: https://generatepress.com/forums/topic/dynamically-reduce-nav-text-size-full-width-hamburger-items-and-nav-alignment/#post-798887

Just adjust the media query to the size at which it needs to display.

In GPP 1.8, you’ll be able to remove this CSS as there’s an option in the Customizer for it.

[Simon Burley]

Good stuff! Thank you Tom. All fixed up now :o)

Regards,

Simon

[Tom]

You’re welcome 🙂

[Author]

Posts