[Support request] Is this possible using generate press?

[Mark]

Hey guys. I like the logo placement and the way the menu interacts on this site. Is this possible to implemt on my site using css or the product features available in your plug in. My site

The Site I would like to replicate in some way.

If so can someone give me guidance please if that’s ok or point me in the right direction to style my site.

[David]

Hi there,

First make sure you have the Mobile+ Module and any other options you require enabled in Dashboard > Appearance > GeneratePress.

Then go to Customizer > Layout > Header and enable the Navigation as Header option:

https://docs.generatepress.com/article/navigation-as-a-header/

You will probably want to adjust the Colors > Primary Navigation and the Layout > Primary Navigation –> Menu Item Spacing so as the menu items will fit the inline space.

Get that bit done and let us know what else you want to match. eg. Menu Hover underline.

[Mark]

Firstly thank you for such a fast response. I have done that.

Is there a way to have the menu interact the same as theirs and also how do I remove the word menu from the site?

I like the way their menu pops open from the side with quite large lettering and the plus sign.

Sorry for so many questions.

[Mark]

Oh and sorry, I have a page title H1 element but I want to to look smaller. When I added it all my images became smaller.

[David]

Can you disable your cache plugin?

[Mark]

I have disable the plug in.

[David]

Thanks – now set the Inner Navigation Width to Contained:

https://docs.generatepress.com/article/primary-navigation-layout-overview/

You can also enable Navigation Search from the same panel.

You may want to consider a more suitable logo for this type of layout. Logos when the nav as set header will use the Menu Item height for its sizing.

For the menu hover effect add this CSS:

@media (min-width: 769px) {
    .main-navigation .menu > .menu-item > a::after {
        content: "";
        position: absolute;
        right: 20px;
        left: 20px;
        bottom: 15px;
        display: block;
        height: 2px;
        background-color: currentColor;
        transition: 0.3s width ease;
        opacity: 0;
    }
    .main-navigation .menu > .menu-item.current-menu-item > a::after,
    .main-navigation .menu > .menu-item.current-menu-ancestor > a::after,
    .main-navigation .menu > .menu-item > a:hover::after {
        opacity: 1;
    }
}

[Mark]

Thank you for your help. Can you tell me if the code has made a change to the menu. I am not seeing it.

[David]

Where did you add the CSS? I am not seeing it on the site

[Mark]

Strange I added to the additional CSS section it’s still there and published. I havent turned my cache plug in back on either.

[David]

Aah found it.
Before that CSS you have this:

Documentation:

remove that as its stopping any CSS after it from applying.

Comments have to be added like so: /* Comments */

[Mark]

Hi, I am really sorry. I have removed the documentation and it still doesn’t seem to be working.

[David]

Its working for me ie. the menu items are underlined on hover – maybe browser cache needs clearing.

You may want to remove the Hover background color in Customizer > Colors > Primary Nav.

Let me know if i misread the requirement – an no apologies necessary 🙂

[Mark]

Thank you. You’re a star. One last thing and this may not be achievable but the H1 tag at the top of my page is rather large. Can you tell me how to make it smaller in size. When I added the element it appear to have reduced the size of my images. It’s ok if this can’t be done easily.

[Tom]

Hi there,

Are we talking about the “Parenting & Lifestyle” title?

If so, try this CSS:

.page-header h1 {
    font-size: 1.5em;
}

[Author]

Posts