ProBeaver Weekly
Weekly for all things Beaver

Center align mobile Logo image in Beaver Builder theme

By default, in mobile view of the Beaver Builder theme: logo image appears on the left side and hamburger icon on the right side. However, you may want to show logo image center aligned while keeping menu hamburger floating to the right side. Little CSS magic can make this change easily.

Before (left aligned logo) vs After (right aligned logo)

Center align mobile logo beaver theme

CSS Code to center align logo image

1. In WordPress dashbaord, go to Appearance > Editor.
2. Add following code at bottom of style.css file in the Beaver Builder child theme.

3. Save changes. Make sure you clear website and browser cache to see changes.

Davinder Singh Kainth

About Davinder Singh Kainth

Davinder loves creating and implementing online spaces. He has over a decade of experience reaching corners of: design, development, blogging and SEO. He also create products at SimpleProThemes(.com), WordPress learning at BasicWP(.com) & digital solutions at iGuiding(.com)

4 Comments

  1. Bill Barnes on April 25, 2017 at 5:23 am

    This is great. Thanks for explaining what I was trying to, but with beaver builder specific classes.

  2. Sean Peacock on April 25, 2017 at 5:01 pm

    Thanks Davinder, this came in handy for me just now.

Leave a Comment





showcase-websites-front-1

Submit Beaver Builder built websites to feature in the "showcase" section on ProBeaver