[Resolved] New Site – Question 2

[Ella]

Hi guys, I’ve made a new site on the Avery theme but I have a few questions…

Website: https://wordpress-623989-3112390.cloudwaysapps.com

Question: When I changed something, it also took away the page titles below the logo, so how do I get these back and get them to stick (so they show on the top of every page), like they do on the Avery theme please?

[Leo]

Hi there,

Not sure if I understand. What do you mean by “When I changed something”? What are you changing?

Is there a specific page where the issue can be viewed?

[Ella]

If you view the Avery template theme, it says Avery then Design – Lifestyle – Fashion etc, I want to get that back but list my pages so I’ll have About (page), Shop (link), Blog (to display a category of blog posts), Challenges (to display a different category of blog posts), but I’m unsure how I go about getting this displayed back in this place? 🙂

[Leo]

That’s just the primary navigation.

Is it set to below header in the customizer?
https://docs.generatepress.com/article/navigation-location/

If so then make sure it’s not disabled with a layout element:
https://docs.generatepress.com/article/layout-element-overview/#disable-element

[Ella]

Oh perfect, all set up now! Is there a way for me to remove the hover line? As when I’m on homepage, it shows a line underneath it and looks strange. Please see here: https://wordpress-623989-3112390.cloudwaysapps.com It would be so much better if when you click on that page title, it just changes colour. Let me know what’s possible! Thanks 🙂

[Ella]

Also – why does the primary navigation then go in the footer? I just added them on the menu on Primary Menu to get them showing up on the top of the page, then I noticed they’d also been added to the footer, so I deleted them from the footer and it’s deleted them from the primary navigation! Let me know what I need to do to get it on the top but not the bottom please. Thanks so much!

[Leo]

– To remove the hover line on the primary navigation, go to Additional CSS field in the customizer and remove this snippet:

/* category menu hover lines */

.main-navigation .menu > .menu-item > a::after {
    content: "";
    position: absolute;
    right: 50;
    left: 50%;
    color: var(--accent-button);  
    top: 8px; 
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    display: block;
    width: 0;
    height: 2px; 
    background-color: currentColor;
    transition: 0.3s width ease;
}

.main-navigation .menu > .menu-item > a:hover::after,
.main-navigation .menu > .menu-item > a:focus::after,
.main-navigation .menu > .current-menu-item > a::after{
    width: 40px; 
    color: var(--accent-button);  
}

I currently don’t see a menu item on your site except for the search icon. Make sure you have the correct theme location set:
https://docs.generatepress.com/article/using-the-wordpress-menu-builder/#setting-a-theme-location

[Ella]

Hi there,

I’ve added the code and when you’re on the homepage, the hover live doesn’t show now, which is great – thank you! Is it possible to move the hover line under the page instead of above however? https://wordpress-623989-3112390.cloudwaysapps.com If we do this, we’d need to add a slight white space under the titles to match the space above and create room for the line to sit, but it would stop it from sitting under the logo when on the middle pages then? 🙂

Also I’ve selected them to go on the main menu and main mobile menu but as you’ll see now – they’re still going onto the footer there too. How can I remove them from that please?

Thanks so much for your help!

All the best,
Ella

[Ella]

Footer Issue Fixed.

My updated reply for this:

I’ve added the code and when you’re on the homepage, the hover live doesn’t show now, which is great – thank you! Is it possible to move the hover line under the page instead of above however? https://wordpress-623989-3112390.cloudwaysapps.com If we do this, we’d need to add a slight white space under the titles to match the space above and create room for the line to sit, but it would stop it from sitting under the logo when on the middle pages then? 🙂

Thanks so much for your help!

All the best,
Ella

[Fernando]

Hi Ella,

To clarify, are you wanting to add the hover line under the menu items? If so, can you try adding this snippet instead?:

.main-navigation .menu > .menu-item > a::after {
    content: "";
    position: absolute;
    right: 50;
    left: 50%;
    color: var(--accent-button);  
    bottom: 8px; 
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    display: block;
    width: 0;
    height: 2px; 
    background-color: currentColor;
    transition: 0.3s width ease;
}

.main-navigation .menu > .menu-item > a:hover::after,
.main-navigation .menu > .menu-item > a:focus::after,
.main-navigation .menu > .current-menu-item > a::after{
    width: 40px; 
    color: var(--accent-button);  
}

div#primary-menu {
    margin-bottom: 20px;
}

[Ella]

Thanks for getting back to me Fernando. That’s right 🙂 I’ve added the code and it’s added extra space below the headings which is great, but the hover line is still showing up above. What should I tweak the code to please? Thanks again!

[Leo]

Looks like you’ve added too much CSS without removing any of them.

Can you first remove the CSS from Additional CSS field?

/* category menu hover lines */

.main-navigation .menu > .menu-item > a::after {
    content: "";
    position: absolute;
    right: 50;
    left: 50%;
    color: var(--accent-button);  
    top: 8px; 
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    display: block;
    width: 0;
    height: 2px; 
    background-color: currentColor;
    transition: 0.3s width ease;
}

.main-navigation .menu > .menu-item > a:hover::after,
.main-navigation .menu > .menu-item > a:focus::after,
.main-navigation .menu > .current-menu-item > a::after{
    width: 40px; 
    color: var(--accent-button);  
}
/* category menu hover lines */

.main-navigation .menu > .menu-item > a::after {
    content: "";
    position: absolute;
    right: 50;
    left: 50%;
    color: var(--accent-button);  
    top: 8px; 
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    display: block;
    width: 0;
    height: 2px; 
    background-color: currentColor;
    transition: 0.3s width ease;
}

.main-navigation .menu > .menu-item > a::after {
    content: "";
    position: absolute;
    right: 50;
    left: 50%;
    color: var(--accent-button);  
    bottom: 8px; 
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    display: block;
    width: 0;
    height: 2px; 
    background-color: currentColor;
    transition: 0.3s width ease;
}

.main-navigation .menu > .menu-item > a::after {
    content: "";
    position: absolute;
    right: 50;
    left: 50%;
    color: var(--accent-button);  
    bottom: 8px; 
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    display: block;
    width: 0;
    height: 2px; 
    background-color: currentColor;
    transition: 0.3s width ease;
}

.main-navigation .menu > .menu-item > a:hover::after,
.main-navigation .menu > .menu-item > a:focus::after,
.main-navigation .menu > .current-menu-item > a::after{
    width: 40px; 
    color: var(--accent-button);  
}

[Ella]

Okay, I think I’ve deleted all of that code correctly? 🙂

[Leo]

I’m still seeing this in there:

/* category menu hover lines */

.main-navigation .menu > .menu-item > a::after {
    content: "";
    position: absolute;
    right: 50;
    left: 50%;
    color: var(--accent-button);  
    top: 8px; 
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    display: block;
    width: 0;
    height: 2px; 
    background-color: currentColor;
    transition: 0.3s width ease;
}

.main-navigation .menu > .menu-item > a:hover::after,
.main-navigation .menu > .menu-item > a:focus::after,
.main-navigation .menu > .current-menu-item > a::after{
    width: 40px; 
    color: var(--accent-button);  
}

If you want the hover underline to be below the menu item, then remove the code above, then add this instead:
https://docs.generatepress.com/article/adding-menu-hover-animation/

[Ella]

Ooh yes, sorry, that was higher up. I’ve now deleted that too!

[Author]

Posts