Archived topic
Off canvas menu - mobile
6 replies · Started by ammgbr on October 10, 2021
Hello,
I have created an element to insert the same logo I have for the mobile header area into the off canvas navigation menu (which is set for mobile only).
Is there a way to:
1) add the same amount of black coloured padding around my element inside the off canvas navigation menu to look like the header of the mobile version
2) have the exit cross sign of the off canvas menu on the same line as the element and on the right side of the element?
3) Ammend the size and colour of the exit sign?
What I am trying to achieve is for the mobile header area and the off canvas menu header area to look the same , only difference is the toggle symbol.
I think I am nearly there but do not know how to achieve the above 2 points, is there a CSS code to assist?
Many thanks
Hi there,
try this CSS:
#generate-slideout-menu .wp-block-image {
order: -1;
flex: 0 1 calc(100% - 50px);
padding: 10px;
margin-bottom: 0;
z-index: 1
}
.slideout-navigation button.slideout-exit {
position: absolute;
top: 0;
width: 100%;
text-align: right !important;
padding: 10px !important;
background-color: #000 !important;
font-size: 25px; /* set size of exit button */
}
.slideout-navigation button.slideout-exit {
color: #fff !important; /* Set color of exist icon */
}Thanks David that works perfect :) Thank you for all your help!
One last thing , how can I place the off canvas menu logo in the centre of the available space? (exit sign will remain on the right)
Can you link us to the page in question again?
The info was erased when the topic was marked as resolved.
Thanks!
Ofc, site link provided
Mathematically centering can be done with this CSS:
nav#generate-slideout-menu .inside-navigation > figure.wp-block-image.size-full.is-resized {
margin: 0 auto;
}But this will overlap abit with the close button on some devices as shown here -
https://share.getcloudapp.com/d5u6BKOm
You may want to consider applying a percentage based image size for this.
Example:
nav#generate-slideout-menu .inside-navigation > figure.wp-block-image.size-full.is-resized {
margin: 0 auto;
max-width: 88%;
}