[Resolved] Replicating Menu Design & other issues

[Andy]

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.

[Tom]

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;
}

[Andy]

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.

[Andy]

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.

[Tom]

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 🙂

[Andy]

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?

[Tom]

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

Also, add this:

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

[Andy]

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.

[Tom]

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

[Andy]

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

[Tom]

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.

[Andy]

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

[Tom]

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%.

[Andy]

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?

[Tom]

Try setting the inner div height to 100%:

#services .inside-grid-column {
    height: 100%;
}

[Author]

Posts