Hamburger menu icon left, logo centered, search icon right - Support

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

Author

Posts
November 15, 2025 at 10:32 pm #1491368

abortolotti
Participant

Hi there!
I would like to have the hamburger menu icon on the top left of the site, the logo entered and maybe (but not necessarily) a search icon on the right; how do I do that?
The staging site is https://staging2.porscheownersandalucia.com

Also, would it be possible to reduce the size of the hamburger menu and append a “Menu” title to the right as on the following website: https://www.porsche.com/uk/

Thank you for your help.

PS: I tried to add the Quick CSS into the Quick CSS field posted on the other thread with this same title but I saw no results, so I opened this thread.

November 16, 2025 at 9:11 am #1491369
Guenni007
Participant
to have the title you only have to make it visible by:
```
#top .av-burger-menu-main .avia_hidden_link_text {
  display: inline;
  font-size: 20px;
  line-height: 0;
  color: var(--enfold-header-color-meta);
  margin-left: 5px !important;
  position: relative;
  top: 2px; /*=== just to center horizontally - adjust to your needs ===*/
}
```
but for your header layout “Hamburger menu icon left, logo centered, search icon right” i would start from a different header layout – not the header centered – menü below .

btw. some topics under yours there is the same title of the topic “Hamburger menu icon left, logo centered, search icon right”
November 16, 2025 at 9:21 am #1491370
Guenni007
Participant
next : if you have the burger icon on the left – maybe you prefer to have that slide-out too from the left:
```
.av-burger-overlay-scroll {
  width: 250px;
  left: -250px;
  max-width: 100%;
  transition: all 0.5s cubic-bezier(0.75,0,0.25,1);
}

.html_av-overlay-side .av-burger-overlay-scroll {
  left: 0;
  max-width: 100%;
  transform: translateX(-250px);
  transition: all 0.5s cubic-bezier(0.75,0,0.25,1);
}
```
November 16, 2025 at 7:14 pm #1491380

abortolotti
Participant

Thank you @Guenni007! I managed to get the “menu” name next to the burger menu icon.
As for the logo, in reality, I would like to keep the logo in the center of the header and move the burger menu icon to the left, on the same line as the header. and Have the social icons with the search icon all on the right hand side.
How can I do that?

November 17, 2025 at 5:31 am #1491382
Ismael
Moderator
Hi,

Thank you for the inquiry.

If you need the logo centered and the burger menu on the left, try setting the Enfold > Header > Header Layout > Menu and Logo Position to Logo right, Menu left. Then add the following css code to move the logo from the right to the center.
```
.html_header_top #top .av_logo_right .logo {
  right: calc(50% + -35.5px);
}

@media only screen and (max-width:767px) {
  .responsive #top #wrap_all #header_main .main_menu {
    left: 0;
    right: auto;
  }

  .html_header_top #top .av_logo_right #header_main .logo {
    position: relative;
    left: 50%;
    right: auto;
    margin-left: -41.5px;
    margin-right: 0;
  }
}
```
Best regards,
Ismael
November 17, 2025 at 6:43 am #1491391

abortolotti
Participant

Hi @Ismael, thank you so much for this, we’re “nearly” there :)
If you see, it now looks as the logo is almost entered but not exactly entered (it look a bit moved to the left)
Also, I would like to have the social media icons on the right hand side of the header.
Is it possible?
Thank you for your help

Antonio

November 18, 2025 at 6:48 am #1491439
Ismael
Moderator
Hi,

Thank you for the update.

Please look for this css rule:
```
.html_header_top #top .av_logo_right .logo {
  right: calc(50% + -35.5px);
}
```
Replace it with:
```
.html_header_top #top .av_logo_right .logo {
    right: 50%;
    transform: translateX(50%);
}
```
Best regards,
Ismael
November 18, 2025 at 10:30 am #1491456

abortolotti
Participant

That’s nearly perfect @Ismael :) Only thing is, while the logo was not entered in the desktop view but it was centred in the mobile view, now it’s all placed on the right and half cut off on the mobile view (iPhone 15 with latest iOS). How can it be fixed also on mobile?

Also, how can I have the social media icons on the right hand side of the header on desktop view, instead of next to the burger menu on the left?

Could you please let me know how to make the burger icon and the “Menu” label appear white instead of gray?
I’d also like them to remain gray once the page is scrolled and the menu shrinks against a white background. Alternatively, it can remain white if the background remains transparent when scrolling.
Additionally, could you show me how to keep the header background transparent both on mobile and when scrolling the page?

Thank you si much for all your fantastic support as always. :)

November 19, 2025 at 7:11 am #1491501
Ismael
Moderator
Hi,

Thank you for the update.

We removed the previous modifications because they conflicted with the current ones and updated the code slightly. This should center the logo, position the burger menu on the left and place the social icons on the right. In mobile view, it will revert back to the default layout, with the logo on the left, the burger menu on the right and the social icons hidden. This should also set the default color of the burger menu and social icons to white on transparent headers.
```
@media only screen and (min-width: 768px) {

  /* Add your Desktop Styles here */
  .html_header_top #top .av_logo_right .logo {
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    margin: 0 !important;
    z-index: 9;
  }

  .responsive.html_logo_right #top #wrap_all .av_mobile_menu_tablet .main_menu {
    width: 100%;
    display: flex;
  }

  #top #wrap_all .social_bookmarks,
  #top #wrap_all .social_bookmarks a,
  #top #wrap_all .social_bookmarks li {
    margin-left: auto;
  }

  .header_color.av_header_transparency .av-hamburger-inner,
  .header_color.av_header_transparency .av-hamburger-inner::before,
  .header_color.av_header_transparency .av-hamburger-inner::after {
    background-color: #ffffff;
  }

  #top .av_header_transparency .phone-info, #top .av_header_transparency .social_bookmarks li a {
    color: #ffffff;
  }
}
```
Desktop:

Mobile:

Best regards,
Ismael
November 21, 2025 at 8:15 am #1491609

abortolotti
Participant

Thank you @Ismael, that looks finally fantastic!
Thank you so much!

November 21, 2025 at 9:05 am #1491620

Ismael
Moderator

Hi,

You’re very welcome! Please don’t hesitate to open another thread if you have more questions. Have a nice day.

Best regards,
Ismael
Author

Posts

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

The topic ‘Hamburger menu icon left, logo centered, search icon right’ is closed to new replies.