New Site – Question 2 – GeneratePress

This topic has 17 replies, 3 voices, and was last updated 3 years, 4 months ago by Leo.

Viewing 15 posts - 1 through 15 (of 18 total)

1 2 →

Author

Posts
December 15, 2022 at 12:05 pm #2463318

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?

December 15, 2022 at 12:10 pm #2463324

Leo
Staff
Customer Support

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?

December 15, 2022 at 12:13 pm #2463330

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? 🙂

December 15, 2022 at 12:26 pm #2463347

Leo
Staff
Customer Support

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

December 15, 2022 at 1:07 pm #2463377

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 🙂

December 15, 2022 at 1:19 pm #2463386

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!

December 15, 2022 at 5:44 pm #2463532
Leo
Staff
Customer Support
– 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
December 16, 2022 at 1:18 am #2463771

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

December 16, 2022 at 1:24 am #2463774

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

December 16, 2022 at 1:49 am #2463787
Fernando
Customer Support
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;
}
```
December 16, 2022 at 1:53 am #2463792

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!

December 16, 2022 at 9:33 am #2464417
Leo
Staff
Customer Support
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);  
}
```
December 16, 2022 at 11:39 am #2464509

Ella

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

December 16, 2022 at 11:41 am #2464513
Leo
Staff
Customer Support
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/
December 16, 2022 at 11:45 am #2464518

Ella

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

Posts

Viewing 15 posts - 1 through 15 (of 18 total)

1 2 →

You must be logged in to reply to this topic.

[Resolved] New Site – Question 2

Popular Articles

[Resolved] New Site – Question 2

Popular Articles

Start building better websites today.