Burger and Social Media icons position on Mobile view - Support

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

Author

Posts
January 23, 2026 at 1:42 am #1494203

bemodesign
Participant

Hello, could you please help me with the CSS code. I’m not sure if I have it right to center the burger icon and the social media icons, from top to bottom, and keep them in the middle of the header. Right now, the icons are too high. Thanks!

https://jackdalten.armourcloud.io/

/* Mobile-only: make logo larger */
@media only screen and (max-width: 767px) {
#top .logo img {
max-height: 110px; /* adjust: 75–95px */
}
}

@media only screen and (max-width: 767px) {
#top .av-burger-menu-main {
top: 50% !important;
transform: translateY(-50%) !important;
margin-top: 55px !important; /* small nudge only */
}
}

/* Show & align social icons on mobile */
@media only screen and (max-width: 767px) {
#top .social_bookmarks {
display: flex !important;
align-items: center;
position: absolute;
left: 20px;
top: 50%;
transform: translateY(-50%);
margin-top: 55px; /* match burger offset */
z-index: 100;
}

#top .social_bookmarks li {
margin: 0 6px;
}
}

January 23, 2026 at 6:41 am #1494208
Ismael
Moderator
Hey bemodesign,

Thank you for the inquiry.

This css code should help — make sure to add it at the very bottom of the previous modifications.
```
@media only screen and (max-width: 767px) {

  /* Add your Mobile Styles here */
  .responsive #top #wrap_all .main_menu {
    display: flex;
    position: absolute;
    flex-direction: row-reverse;
    justify-items: center;
    align-items: center;
  }
}
```
Best regards,
Ismael
February 26, 2026 at 3:20 am #1495505

bemodesign
Participant

You are awesome. Sorry, one last CSS code.
1. For Mobile “SUB Menu” pages, how do I make the Font smaller and a different color?
2. And can the Main menu item(that has Sub menu items) have a “>”, to show that there is a sub menu when clicked?

thanks!!

February 26, 2026 at 5:41 am #1495508
Ismael
Moderator
Hi,

Thank you for the inquiry.

Try this css code to adjust the color and font size of the submenu items.
```
.html_av-overlay-side #top #wrap_all .av-burger-overlay-scroll #av-burger-menu-ul li ul a {
    color: rgba(255,255,255) !important;
    font-size: 0.8rem;
}
```
The menu items with submenus should have angled brackets (>) by default.

Best regards,
Ismael
February 26, 2026 at 5:53 pm #1495546

bemodesign
Participant

It didn’t change. see screenshot
https://drive.google.com/file/d/1H1kdnKNoFw39AZ-QzQAi9SbHE6L76MNF/view?usp=sharing

February 27, 2026 at 6:11 am #1495553
Ismael
Moderator
Hi,

Odd. This is not the menu style I saw yesterday. Please try to use this css code instead:
```
#av-burger-menu-ul li.av-show-submenu > .sub-menu > li > a > .avia-menu-text {
    color: #ffffff;
    font-size: 0.8em;
}
```
To add a submenu indicator, try to add this css code:
```
.av-width-submenu > a::after {
    content: "›";
    display: inline-block;
    margin-left: 6px;
    transform: rotate(90deg);
    font-size: 0.9em;
}

.av-width-submenu.av-show-submenu > a::after {
    content: "";
}
```
Best regards,
Ismael
February 28, 2026 at 12:05 am #1495584

bemodesign
Participant

Thanks!! And one last thing, the Sub Menu Items are really spread far apart. Is there a way to reduce the space in between?

February 28, 2026 at 4:38 pm #1495606
Mike
Moderator
Hi,
Try this css and adjust to suit:
```
.html_av-overlay-full #top #wrap_all #av-burger-menu-ul li li {
    line-height: 0.4em;
}
```
Best regards,
Mike
February 28, 2026 at 9:10 pm #1495625

bemodesign
Participant

thanks!!!

February 28, 2026 at 9:56 pm #1495627

Mike
Moderator

Hi,
Glad that we could help, if you have further questions please open a new thread and we will try to help. Thanks for using Enfold.

Best regards,
Mike
Author

Posts

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

The topic ‘Burger and Social Media icons position on Mobile view’ is closed to new replies.