1

I need help with customizing my top menu. I am using only the primary menu, not the secondary one. I would like my logo, menu elements and social media icons to be in the same line. The logo to be placed at the left, the menu items in the center and the social media icons towards the right. The menu items have to be equidistant from the logo and social media icons. I am able to align the menu items in the center, but as soon as I add the social media icons (in the primary menu) the alignment gets disturbed. Can you please help me sort this out?

The social media icons will be added to the primary menu using font awesome icons. I am able to add those to the menu but also need to right align them.

enter image description here

CODE : @media only screen and ( min-width: 981px ) { 

/*Vertically center the top navigation*/
#et-top-navigation { vertical-align: middle; float:none !important;}
.container { display:table; }

/* Right align the contents of the top navigation area */
#et-top-navigation { text-align:center; }
#et-top-navigation > * { text-align:left; }

#top-menu-nav, #et_top_search { float:none !important; display:inline-block !important}
#et_top_search { vertical-align: top !important; margin-top:3px }

}

Jainil
  • 1,488
  • 1
  • 21
  • 26
Shruti Paliwal
  • 175
  • 1
  • 9

1 Answers1

1

I am not sure why you are trying to use CSS for this. Divi has it's own 'system' to add icons to the menu as custom links in Appearance > Menu. Please consider reading the following article: https://www.elegantthemes.com/blog/divi-resources/how-to-add-icons-to-the-divi-menu-divi-nation-short

Johnny
  • 103
  • 12
  • Hi I can add the social media icons to divi menu but my question is how to I align the icons to the right? Keeping the menu items in center and logo on the left like I showed in the image. – Shruti Paliwal Dec 23 '18 at 12:19
  • The best way is perhaps to inspect the code of each menu item and then each of these separately with custom css. You could add those menu icon and then post css code – Johnny Dec 23 '18 at 12:31
  • That is causing the menu to break on other screen resolutions. I did try it out! – Shruti Paliwal Dec 23 '18 at 12:35
  • I can suggest using _flex_ as mentioned here: https://divisoup.com/q20-rearrange-navigation-items-with-flex/ – Johnny Dec 23 '18 at 12:39