Edin Theme Custom CSS – Decrease Spacing between Links on Primary Menu

  • pragmaticcommunication · Member ·

    I have the premium upgrade and I’m trying to optimize the primary menu spacing. I’ve changed the font size, but I’m wondering if I can
    1. Tweak the spacing between the menu items.
    2. Get the primary menu to wrap to a second line before it collapses into a hamburger.
    3. Reduce the height of the white space when the menu collapses into a hamburger.
    Thanks in advance for any help!

    The blog I need help with is: (visible only to logged in users)

  • otpidusprime · Member ·

    Hello @pragmaticcommunication,
    Use these CSS to:

    1. Tweak the spacing between the menu items.

    .navigation-classic .primary-navigation .menu-primary > ul > li > a {
    padding: 12px 10px;
}

     

    2. Get the primary menu to wrap to a second line before it collapses into a hamburger.

    Do you want each individual menu items one below the other? Or, move the entire primary menu itself to a second line just before the hamburger appears?
    If you want the second one, then use this CSS: 

    @media only screen and (max-width: 1030px) and (min-wdith: 1020px) {
    .primary-navigation .menu-primary > ul {
        margin-top: 30px;
    }
}

     

    3. Reduce the height of the white space when the menu collapses into a hamburger.

    @media only screen and (max-width: 1020px) {

    /*reduce the white space for the hamburger menu*/
    .header-navigation {
        margin: 5px 0px;
    }

    /*reduce the space for individual menus when collapsed to hamburger*/
    .primary-navigation .menu-primary > ul > li {
        margin-bottom: 10px;
    }
}

    Hope this helps 🙂

  • otpidusprime · Member ·

    1. Tweak the spacing between the menu items.

    .navigation-classic .primary-navigation .menu-primary > ul > li > a {
    padding: 12px 10px;
}

    In this code to change the spacing between the items just change the 10px value.

  • pragmaticcommunication · Member ·

    otpidusprime,

    Your answers to my first and third question were PERFECT!!!! THANK you so much! PERFECT. THANK YOU!

    I think I need to restate and clarify my second question. Right now, the primary menu looks one of two ways: It displays fully on one line when there’s enough room or it completely collapses into a hamburger when there isn’t enough room.

    I’m hoping for an “in between” view. When there isn’t enough room to fully display on one line, I’d love it if the menu would “word wrap” to two lines and only collapse into a hamburger when there isn’t enough room to fully display every link in those two lines. The links don’t need to line up underneath each other, just regular old word wrap. Kind of a middle ground – mostly for tablet or other mid-size screens. My previous (not responsive) template would automatically word wrap the menu when needed.

    THANKS again for the code snippets!!!

  • otpidusprime · Member ·

    You’re welcome @pragmaticcommunication 😇
     

    I think I need to restate and clarify my second question. Right now, the primary menu looks one of two ways: It displays fully on one line when there’s enough room or it completely collapses into a hamburger when there isn’t enough room.

    I’m hoping for an “in between” view. When there isn’t enough room to fully display on one line, I’d love it if the menu would “word wrap” to two lines and only collapse into a hamburger when there isn’t enough room to fully display every link in those two lines. The links don’t need to line up underneath each other, just regular old word wrap. Kind of a middle ground – mostly for tablet or other mid-size screens. My previous (not responsive) template would automatically word wrap the menu when needed.

    It happens by default when there are lot of menu items.
    Here’s the screenshot: http://prnt.sc/f12k7s

    Hope this helps 🙂

  • pragmaticcommunication · Member ·

    hmmm. I actually did see that happen in full screen when I had too many items to fit on one line, that’s why I thought it could also word wrap with LESS links when in a MID-sized view.

    Right now, the menu pops from full to hamburger. If it word wrapped as an interim state, then tablets could see the menu all the time. Thanks for your reply!!!

  • otpidusprime · Member ·

    Right now, the menu pops from full to hamburger. If it word wrapped as an interim state, then tablets could see the menu all the time.

    You have got a good point here. But the theme is coded in such a way that when a display resolution threshold value of 1020px is reached it automatically switches to the hamburger menu regardless of the amount of space the menu covers.

    Also, your theme seems to be using JavaScript to remove and append the desktop menu bar as the screen width changes, so even if we reduce the threshold value so that the desktop menu is visible for tablet devices(so that the menu wraps), it wont work(there wont be any menu visible on tablets) because we cannot edit JavaScript codes on WordPress.COM.

    Sorry about that.

  • pragmaticcommunication · Member ·

    Ahhh. I get it. Thanks so much for explaining how it works! I’m sticking with wordpress.com for now, but if I move to .org, I’ll remember that.

    The fact that I was able to reduce the white space above and below the hamburger makes a significant difference.

    I consider this topic resolved! You’ve saved me hours of slugging through CSS code. Hope you have a GREAT week!

  • otpidusprime · Member ·

    Thank You and Welcome again @pragmaticcommunication
    Hope you have a great week too! 😇

  • The topic ‘Edin Theme Custom CSS – Decrease Spacing between Links on Primary Menu’ is closed to new replies.