Horizontal Menu Spacing and Mobile Menu Page Breaks

Hello! I am adding some image icons to my navigation menu and am wondering if there is a way to change the spacing between just the image icons so they are more grouped together?

In addition, is there a way to make it so the social image icons don’t have a page break between them in mobile?



hey there

I can’t see any icons with the menu items, for social icons, please add this CSS in appearance - customize - additional CSS

@media screen and (max-width: 782px){
li#menu-item-10002, li#menu-item-10001 {
float: left;

Colorlib Support Team

Thanks for the followup! That CSS worked great for grouping the images in the menu together in mobile without page breaks. Couple followups.

  1. Is there an easy way to indivudally change the spacing/padding between certain menu items in the nav bar? Like if I wanted to have less space between menu-item-10001, menu-item-10002, and menu-item-10003.

  2. Also, while I was testing this on my iPad (5th Generation), I came across a couple other issues. In Portrait mode on the iPad, The menu breaks so that the last menu item (Artsy Icon) drops down below the other icons.

  3. In addition, when I click the dropdowns on the Ipad, the dropdown text is not visibile (or white). Any ideas here?

Really appreciate the help. I inherited this site and have been slowly working through the customizations that have been done. Thanks!


Any thoughts here? Thanks.