[Support request] possible layout?

[Tony]

hi David,

all works great. couple of things though:

3. the arrow on hover appears only on the sub menu items…i want it to appear on menu items that have no sub menu items i.e. contact us, subscribe etc….

3.1 How do i remove the grey box around the drop down arrow….

3.2 – the drop down effect on sub menus, can that be a little smoother/slower to open up..?

4. i’ve added the social icons using the hook…however, i tried to centre the title and social icons on off canvas to centre but it ain’t working for some reason…

5. i’ve deleted the value there…

thanks so much for your help.

[David]

3. Change the CSS to this:

.slideout-navigation.main-navigation .main-nav li:not(.menu-item-has-children) a::after {
    content: '\2192';
    position: absolute;
    right: 40px;
    opacity: 0;
    transition: all 0.3s;
}
.slideout-navigation.main-navigation .main-nav li:not(.menu-item-has-children):hover a::after {
    opacity: 1;
    transform: translatex(15px);
}

3.1 This CSS:

.slideout-navigation .menu-item-has-children .dropdown-menu-toggle {
    background-color: unset;
}

3.2 Hmmm… tricky one, and probably more noticeable with longer sub menus – try this:

#generate-slideout-menu.main-navigation ul ul {
    display: block !important;
    max-height: 0;
    height: auto;
    opacity: 0;
    pointer-events: none;
    transition: all 0.3s;
}
#generate-slideout-menu.main-navigation ul ul.toggled-on {
    max-height: 1000px;
    opacity: 1;
    pointer-events: initial;
}

4. Put the title and buttons inside a Container Block and set the Containers text align to center and remove its padding.

5. Referencing this reply – remove the hide-on-mobile class from the HTML.
Then add this CSS:

@media(max-width: 1040px) {
    .nav-float-right #site-navigation {
        flex: 1 0 100% !important;
    }
    .site-logo {
        display: block !important;
        margin: auto;
    }
    .mobile-menu-control-wrapper {
        margin-left: unset;
    }
}

[Tony]

hi david,

thanks so much, i’ve amended the above and it seems to work…few more things i noticed…

1. how do i remove the border of the sum menu items…when they appear they seem to have a grey border around…i want that clean no border

2. how do i extend the width of the off canvas panel make it slightly wider?

3. the search icon is not aligned equally on desktop, tablet or mobile..please have a look…seems a little towards the left side…

4. how to apply the border across the off canvas panel just above the ‘follow tony’…

thank you…:)

[David]

1. This CSS:

.slideout-navigation.main-navigation ul ul {
    box-shadow: unset;
}

2. Replace this CSS:

.site, .main-navigation {
    -webkit-transition: -webkit-transform .2s cubic-bezier(.16, .68, .43, .99);
    -moz-transition: -moz-transform .2s cubic-bezier(.16, .68, .43, .99);
    -o-transition: -o-transform .2s cubic-bezier(.16, .68, .43, .99);
    transition: transform .2s cubic-bezier(.16, .68, .43, .99);
    -webkit-backface-visibility: hidden;
    -webkit-perspective: 1000;
}

with:

#generate-slideout-menu.offside {
    width: 300px;
}
#generate-slideout-menu.offside--left {
    left: -300px;
}
.offside-js--is-left.slide-opened .slideout-overlay button.slideout-exit {
    left: 300px !important;
}

.slide-opened .site, .slide-opened .main-navigation,
.slide-opened #generate-slideout-menu.offside--left {
    -webkit-transform: translate3d(300px, 0, 0);
    -moz-transform: translate3d(300px, 0, 0);
    -ms-transform: translate3d(300px, 0, 0);
    -o-transform: translate3d(300px, 0, 0);
    transform: translate3d(300px, 0, 0);
    transition: transform 0.3s;
}

You’ll have to adjust all those 300px values to match your requirements.

3. You could strip the right padding off the search icon link:

@media(max-width: 1040px) {
    .main-navigation .menu-bar-item.search-item a {
        padding-right: 0;
    }
}

4. Edit the Container Block – and add a Spacing > Border Top, then change the Color > Border if needed. I would also remove the Spacing > PAdding.

[Tony]

hi David,

thank you…

1. i added the css above, but when i open the sub menu…there is still a border there…

2. working now, thank you.

3. worked just fine – seems equal now.

4. i edited the container block and added the top border and changed colour, however it just adds another extra border.

i want it have a border like it has on the https://www.apetogentleman.com website…a long border just beneath the website title…and one long border again at the bottom after the ‘ADVERTISE’ menu item…

5. when clicking on the hamburger menu- and the off canvas menu slides open…the webpage should move to the right at the same time the off canvas opens up so it flows together….it does it now, it’s not the same as the website.but maybe needs to be slower when off canvas opens up, not sure.

thanks very much:)

[David]

2 and 4. Replace this CSS:

#generate-slideout-menu .inside-navigation {
    padding-left: 10px;
    padding-right: 10px;
}

with:

#generate-slideout-menu .inside-navigation {
    padding-left: 0;
    padding-right: 0;
}
.slideout-navigation:not(.do-overlay) .main-nav {
    border-top: 1px solid;
    border-bottom: 1px solid;
    border-color: #eee;
    padding-left: 10px;
    padding-right: 10px;
    margin-bottom: 0;
}
.slideout-navigation.main-navigation ul ul li  {
    border-top: unset !important;
}

5. I updated the replacement code on point 2 above

[Tony]

Hi David,

Thank you. Added the above and seems to have fixed the issues, however, when page moves across when iff canvas panel opens, the site logo “tony” does not move.

Also, my social icons, i did what you said and removed padding and everything but icons don’t seem to fit. I added margin instead and still the same.

[Elvin]

Hi Tony,

You can modify the CSS to add the logo so it moves with the rest of the page.

Try this: (I’ve added .slide-opened .site-logo so only the logo moves and leaves behind the hamburger icon)

.slide-opened .site, .slide-opened .main-navigation, 
.slide-opened #generate-slideout-menu.offside--left,
.slide-opened .site-logo {
    -webkit-transform: translate3d(300px, 0, 0);
    -moz-transform: translate3d(300px, 0, 0);
    -ms-transform: translate3d(300px, 0, 0);
    -o-transform: translate3d(300px, 0, 0);
    transform: translate3d(300px, 0, 0);
    transition: transform 0.3s;
}

Also, my social icons, i did what you said and removed padding and everything but icons don’t seem to fit. I added margin instead and still the same.

I’ve checked the icons and I think what you have to remove is the margin. Each of the icons have margin: 20px; on them.

Consider setting it to 10px. 🙂

[Tony]

Hi Elvin,

thank you for that…the site logo moves along with the page, but can you please add the hamburger menu to the move too?

also, i’ve adjusted the margin on the social icons to 10px and even though i’ve aligned them centre, they’re still slighlty to the left, no idea why.

also, how do i shorten the border of the menu items to align with the text all the way to the drop down arrow like the website example? leaving the top and bottom border as it is, adjusting just the menu item border to align with text?

the top border that spans across under my name is thicker than the rest as i believe its showing two border overlapping. how to get rid of that?

[Elvin]

Try this change:

.slide-opened .site, .slide-opened .main-navigation, 
.slide-opened #generate-slideout-menu.offside--left,
.slide-opened .site-logo,
.slide-opened .slideout-toggle
 {
    -webkit-transform: translate3d(300px, 0, 0);
    -moz-transform: translate3d(300px, 0, 0);
    -ms-transform: translate3d(300px, 0, 0);
    -o-transform: translate3d(300px, 0, 0);
    transform: translate3d(300px, 0, 0);
    transition: transform 0.3s;
}

also, i’ve adjusted the margin on the social icons to 10px and even though i’ve aligned them centre, they’re still slighlty to the left, no idea why.

The GB container you’ve hooked inside the off-canvas isn’t going full width of the panel as shown here – https://share.getcloudapp.com/2NulNqKr

Setting it to take 100% of the panel’s width should center the icons.

the quick and easy solution for this is to add this CSS:

nav#generate-slideout-menu .gb-container{
    width: 100%;
}

But the best practice is to do make sure the Container Block on your Block Element is set to full width. 🙂

also, how do i shorten the border of the menu items to align with the text all the way to the drop down arrow like the website example? leaving the top and bottom border as it is, adjusting just the menu item border to align with text?

Are you pertaining to doing the border like this?
https://share.getcloudapp.com/GGupGW0R

If so, change this CSS:

.site-header {
    border-bottom: 0.5px solid rgba(0,0,0,0.1);
}

to this:

.site-header .inside-header {
    border-bottom: 0.5px solid rgba(0,0,0,0.1);
}

[Tony]

Hi elvin,

In terms of the border, i meant on the off canvas menu… the menu items border to be aligned with the text and drop down arrow as in this website https://www.apetogentleman.com/

See their off canvas menu items border is aligned with text and drop down arrow.

Sorry, I should’ve been more clearer.

i juste edited the 100% gb container width but still not centre aligned.

[Ying]

Hi Tony,

Try remove this CSS:

#generate-slideout-menu .slideout-menu li {
    border-top: 0.5px solid #eee;
}

Then add this CSS:

#generate-slideout-menu .slideout-menu li a {
    padding-left: 0;
    margin-left: 20px;
    margin-right: 20px;
   border-top: 0.5px solid #eee;
}
#generate-slideout-menu .slideout-menu li a span {
    padding-right: 0;
}

Let me know 🙂

[Tony]

hi Ying,

thank you…

that aligns the text with the border however, it adds a border to the sum menu items which i don’t want. also at the top next to my name it has a double border…

also how can i:

a. get the ‘x’ close button for canvas menu to be inside in black #000
b. the sub menu items have a line height, i want to get rid of that and bring the sub menu items closer to default.

c. and lastly – elvin was helping out with the social icons alignment, but i can’t get it to go centre again…not sure why…

God knows i’ve bothered you guys a lot over this…and i appreciate you guys helping out…so thank you to all of u.

[Ying]

To remove the double border, add this:

#generate-slideout-menu .slideout-menu >li:first-child >a {
    border-top: none;
}

Change this CSS:

#generate-slideout-menu .slideout-menu li a {
    padding-left: 0;
    margin-left: 20px;
    margin-right: 20px;
   border-top: 0.5px solid #eee;
}

to this:

#generate-slideout-menu .slideout-menu > li >a {
    padding-left: 0;
    margin-left: 20px;
    margin-right: 20px;
   border-top: 0.5px solid #eee;
}

A. This is tricky, give the CSS a try, you might notice a bit difference in terms of sliding effect:

.slideout-overlay {
    z-index: 100002;
    left: 340px;
}

And change this CSS:

.offside-js--is-left.slide-opened .slideout-overlay button.slideout-exit {
    left: 340px !important;
}

To:

.offside-js--is-left.slide-opened .slideout-overlay button.slideout-exit {
    color: #000000;
}

B. Try this, feel free to change the values:

.main-navigation .main-nav ul ul li a {
    padding-top: 0;
    padding-bottom: 0;
}

C. Try this:

.gb-container.gb-container-6b40fadc {
    margin-left: auto;
    margin-right: auto;
}

God knows i’ve bothered you guys a lot over this…and i appreciate you guys helping out…so thank you to all of u.

No problem – however, I want to mention that we won’t be able to provide full custom solutions like this going forward.

The purpose of this forum is to help with questions that are directly related to the free theme and premium plugin.

We are happy to provide some CSS examples but to provide full custom solutions tailored to your need is out of the scope – this is something you will either need to spend some time learning or hire a developer to help you.

You can read more about it here: https://generatepress.com/what-support-includes/

Thanks for your understanding 🙂

[Tony]

hi Ying,

no worries, guess i need to get me a book on CSS…

the double border hasn’t disappeared, it remains…even though i added the above css.

[Author]

Posts