Full Width menu - change vertical space and social share - Support

Tagged: full width mobile menu, social profile

Viewing 5 posts - 1 through 5 (of 5 total)

Author

Posts
August 19, 2024 at 3:10 am #1464868

CharlieTh
Participant

https://calvarybaptistdunnellon.com — please click on the hamburger menu.
Working on the full width mobile menu and have several questions.
1. How can I alter the vertical space between menu items.
2. How can I move the very bottom (and hard to see) social shares to the horizontal center of the word “Social Bookmarks.”
Am trying to work with Guenni007’s very clever ability to add the social shares to the mobile menu, but am certain I’m missing something!
Thanks for any help you may give me — or suggestions.

August 19, 2024 at 7:15 am #1464879
Ismael
Moderator
Hey CharlieTh,

Thank you for the inquiry.

1.) You can adjust the space between the menu items by adjusting the Line Height property of the Menu Links in overlay/slide out element in the Enfold > Advanced Styling panel. You can also use this css code:
```
.html_av-overlay-full #top #wrap_all #av-burger-menu-ul li {
    line-height: 0.6em;
}
```
2.) To move the social icons to the center, please add this css code:
```
#top nav #av-burger-menu-ul .only-burger.menu-item-social {
    display: flex;
    flex-direction: column;
}

#top nav #av-burger-menu-ul .social_bookmarks {
    margin: 0 auto;
}
```
Best regards,
Ismael
August 20, 2024 at 3:50 am #1464941

CharlieTh
Participant

Worked great, Ismael…and I learned lots while looking at what you did!

One last thing I tried was to move the social icons down from the word ‘Social Bookmarks’.

However, it seems to
A) Chop off the tops of the icons
B) Mess up the background cirlce on hover…it’s not centered any more.

This is the line I used that doesn’t quite work…
#top nav #av-burger-menu-ul .social_bookmarks {
margin: 0 auto;

//What I added.
margin-top: 25px!important;
}

Your stuff worked great…mine…not so great.
I’ll be finished with this if I can only figure out how to fix the hover circle and the chopped icons!

Thanks so much for your help…and so quickly!

August 20, 2024 at 5:26 am #1464946
Ismael
Moderator
Hi,

Thank you for the update.

To create space between the menu title and the social icons, try adding this css code:
```
#top nav #av-burger-menu-ul .only-burger.menu-item-social .social_bookmarks {
    margin-top: 0;
}

#top nav #av-burger-menu-ul .only-burger.menu-item-social > a {
    margin-bottom: 25px;
}

#top #wrap_all nav #av-burger-menu-ul .only-burger.menu-item-social .social_bookmarks li {
    line-height: 1.4em !important;
}
```
Best regards,
Ismael
August 25, 2024 at 3:05 am #1465317

CharlieTh
Participant

Ismael, MARVELOUS! Just what I’d hoped for. Thank you so much for your help…would have never gotten it right without you!
Feel free to close this thread.
Am thrilled!
Author

Posts

Viewing 5 posts - 1 through 5 (of 5 total)

The topic ‘Full Width menu – change vertical space and social share’ is closed to new replies.