Get 25% off GP Premium with the discount code: BLACKFRIDAY17

Premium support

Please log in to post in these forums. If you didn't create an account when you purchased, please contact us.

Free support

If you haven't purchased GP Premium, support for the free theme can be found on WordPress.org.

[Resolved] Replicating Menu Design & other issues

Home Forums Support Replicating Menu Design & other issues

This topic contains 28 replies, has 2 voices, and was last updated by  Tom 5 days, 13 hours ago.

Viewing 15 posts - 1 through 15 (of 29 total)
  • Author
    Posts
  • #420177

    I’m trying to replicate how the menu works on this theme: http://mikos.lolli-wp.com/demo7/

    I’ve got the slide-out nav coming out from the right and enabled sticky nav. However, if you look at the theme demo, on tablet/desktop the sticky nav shows the text links and then displays the toggle menu on mobile.
    The sticky nav with GP is only showing the toggle menu on all screen sizes. Is there anyway to overcome this to replicate the Mikos theme demo?. Also the stick nav is full-width, and ideally I need it to have the left and right borders as the whole site does.

    Also, on the page header I have the ‘vertically center content’ option ticked but the text does not seem to be quite central, there is more image above than below the text.

    Lastly, the 2 images to the right of the ‘About Guy’ column has a small line break between them, I’ve tried #about-guy .generate-sections-inside-container .about-imgs br but it hasn’t worked. I think this may be a WordPress editor issue but would appreciate any help with this too.

    Many Thanks.

    GP Premium 1.5.1
    #420328

    Tom
    Lead Developer

    Just to confirm:

    1. You want the slide-out toggle icon to display on desktop and mobile.

    2. Desktop should have a sticky menu with regular links appear only as you scroll down.

    As for the page header, the actual header takes up some of the page header, which pushes the content down. You can make the header a non-factor by selecting the “Place content behind header” option in the Advanced section inside the Page Header settings.

    For the images, try this:

    .about-imgs img {
        position: relative;
        vertical-align: middle;
    }
    #420617

    1. Yes thats correct.

    2. Yes thats correct.

    3. Thanks, I enabled “Place content behind header” which has centred the text but now I’ve lost the toggle button?.

    The CSS fix for the images worked perfectly thank you!. Its weird that positioning CSS fixed it.

    #420682

    It seems the “Place content behind header” setting has moved the toggle off-screen creating some horizontal scroll.

    Another issue I’ve just come across, when using the lightweight grid columns plugin, if you scroll down to the Services section when I added a H4 tag to the title UP FRONT:PRE-PRODUCTION it pushes it out of alignment with the column/image to the left of it.

    #421362

    Tom
    Lead Developer

    1. Add your regular menu items to the menu, then hide it when it’s not stuck like this:

    #site-navigation {
        opacity: 0;
        height: 0;
    }

    2. Hide the regular slide-out toggle:

    .main-navigation li.slideout-toggle {
        display: none !important;
    }

    3. Add the slideout toggle into the header widget:

    <li class="slideout-toggle"><a href="#"></a></li>

    Let me know if that gets you closer 🙂

    #421521

    Thanks definitely closer now but a couple of issues. Non-sticky toggle is almost off the screen and I still have that unwanted horizontal scroll. Sticky nav displaying both text links and toggle where I only want the text links.

    Also, when using the non-sticky slide-out toggle there is no close button.

    Any ideas on the H4 tag going out of alignment in the columns?

    #422128

    Tom
    Lead Developer

    I just adjusted the CSS above – can you try it again?

    Also, add this:

    .generate-combined-header {
        width: calc(100% - 80px);
    }
    #422269

    Thanks Tom working better now. I adjusted the header CSS to the following for the mobile header as it was a little too narrow:

    @media screen and (max-width: 680px) {
    
    .generate-combined-header { width: calc(100% - 50px); }
    
    }

    Is there a way to target just the sticky slide-out navigation for mobile as I need to move it down 20px so it doesn’t overlay the logo?. They both seem to use the same CSS classes and HTML so I can’t see a way of targetting them seperately.

    Also, I noticed in mobile view (767px or below) when clicking the toggle button the page header image moves to the right by about 10px.

    Still need a close button for the non-sticky slide-out menu.

    #422767

    Tom
    Lead Developer

    Hmm, there isn’t really a way to target the slide-out menu only when the sticky nav is activated, as the sticky nav doesn’t add any active classes to the html or body element.

    As for the close button, this should help: https://generatepress.com/forums/topic/slideout-menu-widget-area-and-close-x/#post-390603

    #423044

    Thanks will have to have a think about the mobile menu issue. Tried different z-index values which worked for the sticky slide-out but it messes up the standard slide-out.

    Close button now working.

    Any ideas regarding the page header image moving to right when clicking the toggle button at viewport sizes 767px and below?.

    Also, if you scroll down to the services section. There are 2 columns, image on the left, text on the right with the title ‘UP FRONT: PRE-PRODUCTION’.
    I had to add the image to the left column as a background image due to the padding in the right column expanding below the image on the left.
    I wanted the columns to change to 100% at a smaller screen size so I added the following CSS:

    @media (min-width: 860px) {
    
    #services .lgc-tablet-grid-100 {
        width: 50% !important;
    
     }

    However, at viewport size between 860px and 1025px the background image for the left column is not displaying, as soon as it reaches 1026px it starts displaying again. I can’t workout why the column has no height between these sizes?.

    #423306

    Tom
    Lead Developer

    The page header moving is likely because the scrollbar is removed on mobile when the slideout is opened. That shift is the page taking up the width of the missing scrollbar. It won’t happen on actual mobile devices.

    Background images will only show if the element has height. On desktop, the element matches the height of the column next to it. When there’s no column next to it (on mobile), the height is removed.

    #423316

    Thanks I realised about the scroll bar after posting.

    Regarding the background image, at the viewport size 860-1025px there ARE columns next to each other so they should both have height?.

    #423413

    Tom
    Lead Developer

    The actual height of the column is removed at that point it looks like.

    You’ll need to manually add height to the div, or you can use a static image instead of a background image and set the image height to 100%.

    #423583

    Ok, tried adding a height to the div but that didn’t work well because it needs to expand and contract responsively with the right-hand text column.
    I’ve added it back as a static image, tried specifying height: 100% on the image itself and in the CSS but it wont expand to fill the column because of the bottom padding (which is needed) in the right-hand column.

    Any ideas?

    #423654

    Tom
    Lead Developer

    Try setting the inner div height to 100%:

    #services .inside-grid-column {
        height: 100%;
    }
Viewing 15 posts - 1 through 15 (of 29 total)

You must be logged in to reply to this topic.