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

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

Author

Posts

November 10, 2025 at 1:34 pm #1491114

pelgrimrat

Participant

Dear people of the support forum,

On this page:

Home

I would like to create the following header:

Hamburger menu icon on the left, logo centered, search icon (magnifying glass) on the right.
I am using a strechted layout with a container width of 1310px (standard fare).

For mobile, I would like to maintain this header layout.

I managed to center the logo on all screen sizes with this code:

.html_header_top #top .av_logo_right .logo {
    right: 50%;
    margin-right: -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;
  }
}

Your help will be much appreciated!

November 10, 2025 at 2:12 pm #1491118

Guenni007

Participant

try:

@media only screen and (min-width:768px) {
  #top div .logo {
    z-index: 101 !important;
  }
  #top .main_menu, 
  #top .avia-menu {
    width: 100%;
  }
  #avia-menu #menu-item-search {
    position: absolute;
    right: 0;
    left: auto;
  }
}

November 10, 2025 at 2:25 pm #1491119

pelgrimrat

Participant

Thank you so much Guenni! And so quick!

I removed the media query, because I want the same layout on mobile.
The only issue now is, that on mobile, the clickable area for the logo overlaps the search icon. Which makes it impossible to use the search icon on mobile.

Should I play around with the z-index of certain elements?

November 10, 2025 at 5:18 pm #1491126

Guenni007

Participant

you have removed the search icon ?

November 11, 2025 at 3:58 am #1491152

Ismael

Moderator

Hi,

Thank you for the inquiry.

Did you remove the search icon? Please enable it again so we can check it properly. A screenshot would also be helpful.

Best regards,
Ismael

November 11, 2025 at 8:25 am #1491160

Guenni007

Participant

if it is active again –
try:

.html_header_top #top #wrap_all .av_logo_right #header_main .logo {
  position: relative;
  left: 50%;
  right: auto;
  margin-left: unset;
  margin-right: unset;
  transform: translateX(-50%);
  width: auto;
}

you see i have centered the logo a little different – so if you find those margin-left and margin-right values in your code remove them.
i set it to unset to overwrite your settings.

November 11, 2025 at 12:30 pm #1491178

pelgrimrat

Participant

Very nice! Thank you again so much! It looks very nice now and I will definitely keep this code for the future.

I had indeed disabled the search icon, because my client decided to get rid of it.

Instead, I would like to replace the search icon with an Instagram icon, which links to her Instagram page.
Is it possible to make this happen?

November 12, 2025 at 4:30 am #1491217

Ismael

Moderator

Hi,

Thank you for the update.

Add the following code to your functions.php file to display an instagram icon next to the mobile menu:

add_action( 'ava_inside_main_menu', function() {
    $instagram_url = 'https://www.instagram.com/yourusername/';
    echo '<a class="av-custom-header-icon" href="' . esc_url( $instagram_url ) . '" target="_blank" rel="noopener noreferrer">';
    echo do_shortcode('[av_font_icon icon="instagram" font="svg_entypo-fontello" size="30px" av_uid="av-mhvfocn7"]');
    echo '</a>';
});

Then add this css code:

.av-custom-header-icon {
    position: absolute;
    left: 0;
    top: 20px;
    display: none;
}

@media (max-width: 768px) {
    .av-custom-header-icon {
        display: inline-block;
    }
}

Best regards,
Ismael

November 12, 2025 at 6:56 am #1491225

Guenni007

Participant

ismaels filter (ava_inside_main_menu) is a brilliant idea.

maybe it is easier to use if we insert a social bookmarks shortcode:
then we can use all those benefits of enfold options dialogs – and hover styling etc.

function social_bookmarks_shortcode_inside_main_menu() {
  $social_args = array('outside'=>'ul', 'inside'=>'li', 'append' => '');
  $social = avia_social_media_icons($social_args, false);
  return $social;
}
add_shortcode('social-bookmarks', 'social_bookmarks_shortcode_inside_main_menu');

add_action( 'ava_inside_main_menu', function() {
    echo do_shortcode('[social-bookmarks]');
});

Quick css for your setting (left burger – logo – socials )

#top div .logo {
  z-index: 101 !important;
}

#top .main_menu, 
#top .avia-menu {
  width: 100%;
}

#avia-menu #menu-item-search {
  position: absolute;
  right: 0;
  left: auto;
}

#top #wrap_all .av-hamburger-inner {
  display:block;
  top: 0;
  margin-top: 4px;
}

.html_header_top #top #wrap_all .av_logo_right #header_main .logo {
  position: relative;
  left: 50%;
  right: auto;
  margin-left: unset;
  margin-right: unset;
  transform: translateX(-50%);
  width: auto;
}

.responsive #top #wrap_all  .main_menu {
  width: 100%;
  display: flex !important;
  flex-flow: row nowrap;
  justify-content: space-between;
  height: inherit;
}

#top #wrap_all .menu-item-avia-special {
  display: block ;
}

.responsive #top #wrap_all #header .main_menu ul.social_bookmarks {
    display: flex;
}

#top #wrap_all .main_menu ul.social_bookmarks li a {
  height: 30px;
}

#top .main_menu .social_bookmarks li {
  width:40px;
  margin-left:5px
}

#top .main_menu .social_bookmarks li.avia-svg-icon img[is-svg-img="true"],
#top .main_menu .social_bookmarks li.avia-svg-icon svg:first-child {
  height:1.1em;
  width: auto;
  margin-top: 4px !important;
}

@media only screen and (max-width: 767px) {
  .responsive #top #wrap_all .container {
    width: 95%;
    max-width: 95%;
  }
  .html_header_top #top #wrap_all .av_logo_right #header_main .logo {
    max-width: 200px;
    transform: translateX(-57%);  /* === an individual correction - depends on how many social icons are present=== */
  }
}

see : https://elementar.webers-webdesign.de/

PS: for more than 3 social bookmarks it gets complicated on small mobile screens. So maybe in this case we set them to display none – or switch in this case to header meta solution

PPS: i tried first that option to show social icons via Header – Extra Elements – Header Social Icons : “display in main header area”
but this was to complicated to find the right css positioning options – especially on shrinking headers.

Author

Posts

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

You must be logged in to reply to this topic.