Home>Support>Navigation

Navigation

Hi,
I wonder if there is away to decrease the space/padding between menu items dynamically?
Original padding are 35 px and fixed until the menu collapses.

The original padding on desktop is fine but for example on iPad its a bit unnecessary wide spaces so
the menu is distributed on two rows. I don’t want to have a collapsed mobile navigation menu on iPad.
Just the space between items is less there is enough screen space to fit the whole menu.

Thanks!

This is our free support forum. Replies can take several days. If you need fast email support, please purchase a SiteOrigin Premium license.

  1. 9 years, 28 days ago Andrew Misplon
    Hi, I Work Here

    Hi ERobert

    Not dynamically but you can drop the padding down according to the viewport:

    /* Menu Padding Horizontal */
    
    @media (max-width: 780px) {
    
    	.main-navigation ul li a {
    		padding-right: 25px !important;
    		padding-left: 25px !important;
    	}
    
    }
    

    Should do the trick.

  2. 9 years, 28 days ago eRobert

    Perfect!
    Really enjoying using WordPress and your theme when things can be controlled
    as you want it to be.

    And of course your help is really good.

    Thanks!

  3. 9 years, 27 days ago Andrew Misplon
    Hi, I Work Here

    Super, glad to hear that helped.

    Thanks for your continued support.

    Cheers :)

Replies on this thread are closed. Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Get The Most Out of SiteOrigin with SiteOrigin Premium

Find Out More