[Support request] SLIDEOUT MENU DESIGN AND FORMAT

[daryl]

Hi generate press

I’ve almost finished the site, not being a web designer I’ve taken quite a while but am on the final stretch now.

I just neded to format the slide out menu and can’t figure it out.

it’s just the standard format and positioning now, with a few tweaks i managed to figure out, but everything seems to be linked to the header alignment of the hamurger icon etc, so i can’t figure out hoew to control the design of the menu slide out independently?

I’m happy with the font and the hoverover colour, but would like to:-

1…centre everything,
2… input gold lines below each menue item
3… below the menu place a solid white line to run the length of the screen.
4…below that the logo and the phone number (would be good on mobiles if the user could just press this to make a call?, which doesnseem to happen at the moment)
5… and below that to have my rainbow divider always appear at the bottom of the screen whether on desktop, ipad or mobile.

visually what I want to create is shown in the pictures below… any help to acheive this would be very very much appreciated.

many thanks Daryl

[Tom]

Hi there,

This might be a start:

.offside--right.is-open {
    right: auto;
    left: calc(50% - 132.5px);
    transform: translate3d(0,0,0);
}

.nav-aligned-right.nav-below-header .main-navigation.slideout-navigation {
    text-align: center;
}

#generate-slideout-menu .slideout-menu li {
    text-align: center;
}

#generate-slideout-menu .slideout-menu li a {
    border-bottom: 1px solid #fff;
}

.offside-js--is-right.slide-opened .slideout-overlay button.slideout-exit {
    right: calc(50% - 200px);
}

Do you have an image for those colored blocks? They could be made with CSS, but it would be pretty involved.

[daryl]

thanks Tom,

that’s worked wonderfully. very much appreciated.

for the coloured squares, there are two images (just in case if you need two different sizes?)

one larger one here for the larger screen

https://aearyl.com/wp-content/uploads/2018/09/divider.png

and one here for the mobile

https://aearyl.com/wp-content/uploads/2018/10/colourboxes_small.png

…..so just these coloured boxes along the bottom and then solid white line running across the screen dividing the menu and the aearyl.com logo and then we’re there and the branding will be all tied in. 🙂

thank you so much for your help 🙂

[Tom]

You could try something like this:

.slideout-overlay {
    background-image: url(https://aearyl.com/wp-content/uploads/2018/09/divider.png);
    background-repeat: no-repeat;
    background-position: center bottom;
}

@media (max-width: 768px) {
    .slideout-overlay {
        background-image: url(https://aearyl.com/wp-content/uploads/2018/10/colourboxes_small.png);
    }
}

[daryl]

Thanks Tom for your prompt response, very much appreciated…it now works perfectly on desktop and laptop and landscape tablet, but on mobile only appears when you scroll down (this isn’t a problem on mobile landscape because the whole content doesn’t appear anyway, but on a mobile portrait there’s plenty of space below the phone number for it to display but it doesn’t until you start scrolling quite a bit then pops up … on a side note seems to display on chrome, but not safari and firefox on the mobile portrait?

if theres a fix to it that would be wonderful 🙂

then the last thing would be the thicker white line to run the length of the screen, between the last menu item (about) and the logo…

once I’ve done that it’ll be virtually all the technical aspects of the website done (thank goodness) 🙂

[Tom]

Hmm, the background image will go to the bottom of the element, so if the bottom is below the initial viewport, you’ll have to scroll.

To make it fixed, you might have to add the actual image into a widget, then set it to fixed. However, I’m not sure how well that would work on mobile either.

I’m not sure it’s possible to do the full width line within the current setup, unfortunately. The structure of the overlay element would have to change pretty considerably to achieve it.

[Author]

Posts