[Support request] Is this possible using generate press?

Home Forums Support Is this possible using generate press?

  • This topic has 14 replies, 3 voices, and was last updated 5 months ago by Tom.
Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • #1463487
    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.

    #1463513
    David
    Staff
    Customer Support

    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.

    #1463540
    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.

    #1463565
    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.

    #1463589
    David
    Staff
    Customer Support

    Can you disable your cache plugin?

    #1463638
    Mark

    I have disable the plug in.

    #1463662
    David
    Staff
    Customer Support

    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;
        }
    }
    #1463705
    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.

    #1463739
    David
    Staff
    Customer Support

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

    #1463774
    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.

    #1463856
    David
    Staff
    Customer Support

    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 */

    #1463994
    Mark

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

    #1464059
    David
    Staff
    Customer Support

    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 🙂

    #1464121
    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.

    #1464491
    Tom
    Lead Developer
    Lead Developer

    Hi there,

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

    If so, try this CSS:

    .page-header h1 {
        font-size: 1.5em;
    }
Viewing 15 posts - 1 through 15 (of 15 total)
  • You must be logged in to reply to this topic.