• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

WP SITES

2784

Original Genesis Tutorials & 6000+ Guaranteed Code

Snippets

  • Consultation
  • Full Access
  • Log in

Vertical Align Title Area & Menu On Desktops & Mobiles

The solution in this download folder enables you to add a logo of any size and vertically align it with your nav menu like this :

This vertically aligns all site header elements including your site title or custom logo, nav menu and the responsive menu toggle which kicks in when your screen width hits 960px if using the Genesis Sample theme.

Demo Video

Shows the custom logo and menu vertically aligned on both desktops and mobile screens.

Tested using the Genesis Sample child theme by StudioPress.

Installation Steps

There’s 2 steps :

  1. # Copy & paste the CSS from the style.css file to the end of your child themes style sheet and clear all types of caching.
  2.  

  3. # Go to Customize > Site Identity and set the width of your logo. In this case, the logo is 100px in height by 133px in width.
  4.  

Download Folder

Note : You will need to modify the value for the following CSS media query if your logo is not 100px in height to vertically align the menu toggle icon on mobile screens.

@media only screen and (max-width: 960px) {

.menu-toggle {
     margin-top: 30px;
}

}

Related Tutorials

  • Center Site Header Elements On The Same Line

CSS Grid Columns Custom Logo Nav Menu

Reader Interactions

Leave a Reply Cancel reply

You must be logged in to post a comment.

Primary Sidebar

Code written by Brad Dalton specialist for Genesis, WooCommerce & WordPress theme customization. Read More…

Advertise · WPEngine · Genesis · Log in

  • Access Problems
  • Account Details
  • Consulting
  • Tags
 

Loading Comments...
 

You must be logged in to post a comment.