Layouts for Side by side Logo Image and Menu Bar

[scrambler]

This is a layout request that comes up often and the solutions examined in the past have limitations that can make them unsuitable for your design. Here they are including the new one:

A) Moving the right aligned Menu Bar above the header image with Custom CSS, see Here

• Works for: Short menu bars, or Logo images that can accommodate the Menu Bar overlapping with the image.
• Limitations: As the browser shrinks, the Menu Bar will start overlapping with the Logo Image. The Overlapping can be prevented with margin in the menu bar, in which case the menu bar will start splitting in several lines beside it.

B) Using the Header Horizontal Widget Areas with one widget for the Logo image and one widget for an Extra Menu shortcode.

• Works for:
• Logo and Menu bar space will scale down with the browser, menu will become several lines.
• Can be configured to stack at a certain browser width with Custom CSS
• Limitations:
• Extra menu Shortcode do not support transition to a Slide Open Mobile menu
• Extra menu Shortcode is Pro only

C) New proposed solution: Using the Add HTML menu area (left or right) for the logo image.

Has the same benefits as the Header Horizontal Widget Areas. It can be configured for side by side, scaling or stacking layout, but has the benefit of supporting the transition to a slide open mobile menu.

The description below is for a Logo image on the left and a right aligned Menu Bar on the right. It can easily be extrapolated for a Left Menu Bar and logo image on the right.

1) Base Implementation, Side by side then stack up.

When the Browser shrinks, and when the Menu Bar reaches the edge of the Logo Image, the Menu Bar will stack under the Logo Image  to prevent overlap.

Check main options > Menus > Menu Layout section > Move primary menu to right
Add the logo image in the Add HTML to left Box of the Add HTML to Menu bar section with code like
          <img style=”top:0px;” src=”ImageUrl“/>

Then Put the Custom CSS Rules below in Advanced options > HEad section > CUstom CSS Rule box to allow the image to be full size besides the menu bar
          #nav-bottom-menu {overflow:hidden;}                      /*only needed if header is full width*/
          .menu-add-left {max-height:100%; margin:0px !important; padding:0;}   /*allows the menu add area to expand with the image*/
          .menu-add-left img {max-height:100% !important; max-width:100%;}         /*allows the image itself to have its full size*/

2) Vertical adjustment of the Menu bar:

By default the Menu bar will be aligned with the Top of the image, if you need to bring it down some, use the rules
          .menu_bar div.menu {margin-top:20px;}                /* adjust value to what is needed */
          .menu_bar .menu-add-left {margin-bottom:-20px !important;}  /* Use same value as above with a minus sign to eliminate space when menu bar stacks under the image*/
          .menu_bar#access {min-height:100px;}                   /* use the Height of the image for the min-heigh value */

3) Display Logo Image after the Menu Bar switches to the slide open Mobile Menu

When the menu switches to the Mobile Slide Open menu, the Logo Image will disappear. In order for the Logo to be there after the switch to the Mobile Menu, you can add the Logo Image in one of the header HTML Insertion area such as Advanced Options > HTML Insertion Area > Site Header Insert code, placing it inside a weaver show if mobile shortcode. Something like:

          [weaver_show_if_mobile]<img src=”ImageUrl“/>[/weaver_show_if_mobile]

To eventually center it, add the rule below in the Site Header Insert Code BG CSS+ Box
          {text-align:center;}

4) Alternative responsive mode

If you would prefer for the Logo Image and the Menu Bar to always stay side by side and scale down with the browser instead of stacking up, add the Custom CSS rule below.

          .menu_bar#access div.menu {width:70%;}
          .menu_bar .menu-add-left {width:25%;}

Adjust numbers to the highest total value that does not cause stacking up. The total may have to be less than 100% depending on paddings and margins.

D) If you do not want the menu aligned right, but simply besides the image and splitting into multiple lines besides the Logo Image when the browser shrinks

Do the following

Put the same HTML in Add Left HTML
Do not select Move primary menu to the right

Add the rules below

.menu_bar .menu {padding-left:10px;}  /*whatever space you want right of the image*/
.menu-add-left {max-height:100%; margin:0px !important; padding:0;}   /*allows the menu add area to expand with the image*/
.menu-add-left img {max-height:100% !important; max-width:100%;}         /*allows the image itself to have its full size*/

if you want to shift the menu down use
.menu_bar div.menu {margin-top:20px;}

As usual if I missed something or screwed up, let me know 🙂

[GregH]

Useful article, and one I was looking for but couldn’t find for some reason. Let me ask about C) 1). You can put the logo to the left but won’t it be limited to a measly 24px in size? What if your logo is bigger, as ours is?

[scrambler]

If you read the comment on the CSS, it allows you to get the image full height 🙂

 .menu-add-left {max-height:100%; margin:0px !important; padding:0;}   /*allows the menu add area to expand with the image*/
          .menu-add-left img {max-height:100% !important; max-width:100%;}         /*allows the image itself to have its full size*/

[GregH]

Brilliant, Scrambler! I should have known that “limit” could be adjusted. This should work for me thanks!

[MichelleWI]

This is a wonderful walk-through, Scrambler, and does just what I need it to do.  Can you assist me with a little fine tuning?

The client wants a menu area that looks like the one on this site:  http://www.tbydaniel.com/

The working sample site for her re-design is here:  http://plexus.healthyfamilyfoodscanada.com/

I would like to keep the logo (the size of which she personally chose) vertically centered while bringing the top and bottom border lines more to the vertical center, as seen on the T by Daniel site that my client really likes.

Thanks!  MichelleWI

[Author]

Posts