enfold theme menu customizations

This month we have been asked numerous times for a logo to be centered on the WordPress Website. As we typically utilize the Enfold Theme for our WordPress Websites, we needed to do some customizations to the header and menu to make the formatting work.

It is simple enough, however, with just a bit of CSS to center the logo on the menu so menu items appear on either side (and in line) with the logo image!

Sets and CSS to add from Enfold Tutorials is at:

https://kriesi.at/documentation/enfold/menu/#toggle-id-147

/*————————*/
/* CSS – Logo center split menu
/*————————*/

@media only screen and (min-width: 780px) {
/*In the below code nth-child(x) the value of x should be half the number of total menu items*/
#top #header .av-main-nav li:nth-child(3) {
/* Adjust the width of the logo */
margin-right:150px;
}

#header .main_menu {
/*background: gold;*/
width: 100%;
left: 50%;
transform: translateX(-50%);
}

.av-main-nav-wrap {
left: 50%;
transform: translateX(-50%);
}

#header .logo {
left: 50%;
transform: translateX(-50%);
z-index:999;
}

#header .logo img {
top: 50%;
transform: translateY(-50%);
max-width: 100px;
}
}

When a logo is centered on Enfold using CSS, the social media icons appear behind the menu. To fix this, simply add the following to your General Styling Settings under Quick CSS to have the icons Float Right.

#top nav .social_bookmarks { float: right; }

This video tutorial for the Enfold Theme goes into the Header and Menu Settings specifically for:

  • Appending search icon to the Main Menu (Theme Options – Main Menu)
  • Adding Social Icons to the Main Menu (Theme Options – Header – Extra Elements)

If there are other items you have questions about on Enfold, please let us know! And don’t forget to subscribe to the Social Speak Network YouTube Channel!


Also published on Medium.