Search issue the Split template

Hi Peter,

With regards to this, here is an article you may refer to if you wish to recreate Split’s header section without using the Template: https://docs.generatepress.com/article/centering-logo-navigation/

On a sidenote can the search be placed just below the Nav, justified to the far right, and have the far-right nav button also justified to the far right?

Yes, this could be possible through custom CSS. Here is a CSS you can try adding with your current structure:

.main-navigation > .inside-navigation {
    flex-direction: column;
    align-items: stretch;
}

.inside-navigation .menu-bar-items {
    align-self: flex-end;
}

@media (max-width: 768px) {
       .inside-navigation .menu-bar-items {
        order:2;
    }
}

Here is an article with regards to adding CSS: https://docs.generatepress.com/article/adding-css/

Hope this helps!

Thank you for the quick reply. The code worked flawlessly but frankly, I don't like the way it looks. I am going to change the templates (since I just got started it won't be a big deal).

Please correct me if I am wrong but I feel that it may be easier to experiment with center logo with a template like Article or Marketer especially since the code you shared with me is so simple to use.

Making the adjustments in Split seems cumbersome.

Or....

Can I test split with left logo easily?

Thank you again.

Peter

Hi there,

on the Split site, to have the logo to the left you would edit the Customizer > Additional CSS and just remove a) the CSS provided in this doc and b) the CSS that Fernando provided

And for any other Site Library then you just follow the steps provided by Fernando

Hello David, thanks for the reply but I got impatient and removed the template. I decided to do the page myself and learn more in the process.

You helped with a similar issue in the past.

You showed me how to make menu items glow.

I assume that the two elements identified in the picture are two different style rule sets.

I need your assistance in making the whole button on the menu glow purple (#E007F8)

this is all the additioanl CSS on that site:

.main-navigation:not(.toggled) ul li.menu-button a {
border-width: 1px;
background-color: #E007f8;
border:2px solid #E007f8;
color: #ffffff;
border-radius: 12px;
line-height: 40px;

}

.main-navigation .main-nav ul li a:hover {
text-shadow: 0 0 10px #fff !important;
}

as well as making the button glow purple.

Also, while searching the documentation, I ran across a page that show tons of customization examples. the page had a right side bar with various topics (i.e. header, footer etc.). That page showed the examples, is there a page that shows the CSS for those effects?

Thank you in advance.

Ok, so you would need to:

1. Select the button in the editor, and add a class to Advanced > Additional CSS Class(es) eg. glow-button
2. Change this CSS:

.main-navigation .main-nav ul li a:hover {
     text-shadow: 0 0 10px #fff !important;
}

to:

.wp-block-button__link,glow-button:hover,
.main-navigation .main-nav ul li a:hover {
     text-shadow: 0 0 10px #fff !important;
}

Thanks, David, but that didn't work.

I went to the page where I saw the effect (moneylab.co) and I tried to find the CSS myself using the inspector but it is beyond the scope of my capabilities at this time.

Also, I applied that class to both buttons (nav and page) and the nav button color and background are gone.

For the sake of good order I have included all of the CSS that is currently in the "Additional CSS" box:

.main-navigation:not(.toggled) ul li.menu-button a {
border-width: 1px;
background-color: #E007f8;
border:2px solid #E007f8;
color: #ffffff;
border-radius: 12px;
line-height: 40px;

}
.wp-block-button__link,glow-button:hover,
.main-navigation .main-nav ul li a:hover {
text-shadow: 0 0 10px #fff !important;
}

/*.main-navigation .main-nav ul li a:hover {
text-shadow: 0 0 10px #fff !important;
}*/

@media(min-width: 769px) {
.inside-header>.site-branding,
.inside-header>.navigation-branding,
.inside-header>.site-logo,
.site-branding-container,
#site-navigation .navigation-branding .site-logo,
#sticky-navigation .navigation-branding {
position: absolute;
left: 50%;
transform: translateX(-50%);
z-index: 1000;
}

#site-navigation {
margin-left: unset !important;
display: flex;
}

.site-header .main-navigation:not(#sticky-navigation) .inside-navigation {
margin: unset;
}

#site-navigation,
#primary-menu,
.main-navigation .inside-navigation {
flex: 1;
}

/* Change nth-child(#) to first item to right */
.main-navigation ul li:nth-child(4) {
margin-left: auto;
}
}

Thank you!

Can you share a link to where i can see the button?

David et al,

All of this work is being done on thepeterm.com. That is a sandbox site that I use to learn WP/GP/GB/CSS. Thanks.

David,

Of course.. the button is located on this page: https://www.moneylab.co/ I have included an image below to show you which two buttons I am trying to recreate.

Thanks!

If we just deal with the button on the page first. You can use this CSS for the glow-button class:

.glow-button a {
    transition: all 0.2s ease-in;
}

.glow-button:hover a {
     box-shadow: 0 0 20px rgb(224, 7, 248,0.8);
     transform: translateY(3px);
}

David,

Outstanding!!!

The button on the page is excellent and done.

Please help me get the background back on my nav.

Here is a screen shot of what I have at thepeterm.com

and for the sake of good order this is all of the CSS in "Additional CSS":
.main-navigation:not(.toggled) ul li.menu-button a {
border-width: 1px;
background-color: #E007f8;
border:2px solid #E007f8;
color: #ffffff;
border-radius: 12px;
line-height: 30px;

}

.glow-button a {
transition: all 0.2s ease-in;
}

.glow-button:hover a {
box-shadow: 0 0 20px rgb(224, 7, 248,0.8);
transform: translateY(3px);
}
.wp-block-button__link,glow-button:hover,
.main-navigation .main-nav ul li a:hover {
text-shadow: 0 0 10px #fff !important;
}

/*.main-navigation .main-nav ul li a:hover {
text-shadow: 0 0 10px #fff !important;
}*/

@media(min-width: 769px) {
.inside-header>.site-branding,
.inside-header>.navigation-branding,
.inside-header>.site-logo,
.site-branding-container,
#site-navigation .navigation-branding .site-logo,
#sticky-navigation .navigation-branding {
position: absolute;
left: 50%;
transform: translateX(-50%);
z-index: 1000;
}

#site-navigation {
margin-left: unset !important;
display: flex;
}

.site-header .main-navigation:not(#sticky-navigation) .inside-navigation {
margin: unset;
}

#site-navigation,
#primary-menu,
.main-navigation .inside-navigation {
flex: 1;
}

/* Change nth-child(#) to first item to right */
.main-navigation ul li:nth-child(4) {
margin-left: auto;
}
}

David, thanks again.

Hi Peter,

To clarify, are you referring to the background color?

If so, it seems that you set the background color of your nav to a variable from the Global Colors. Specifically, “contrast-2”.

See: https://share.getcloudapp.com/mXuJlobb

To change this, you can go to Appearance > Customize > Colors. Then select the specific global color attributed to the background color of your nav(contrast-2). You can also change colors of different sections in this area.

See: https://share.getcloudapp.com/Bludlyzg

If however you’re referring to background images, you can go to Appearance > Customize > Background Images. Make sure Background module is activated in Appearance > GeneratePress.

Hope this helps! Kindly let us know if you’ll need further assistance. :)