Reduce Header & Menu Height

  • morts81

    (@morts81)


    9 years, 2 months ago

    I’m looking for a way to do the following on my page:
    1) reduce the overall header height
    2) reduce the height of the main menu bar under the header (maybe reduce padding?)

    I’m using the Academica theme and my site is below:

    http://dailyfantasysportsaustralia.com/

    Any assistance would be more than appreciated.

    Morts81

Viewing 5 replies - 1 through 5 (of 5 total)
  • j09

    (@j09)

    9 years, 2 months ago

    Hey @morts81

    You can try to add the following CSS. 

    
#main-nav {
    margin: 0 auto;
    padding: 0;
}

#logo {
    padding: 13px 0 13px 0;
}

    On a couple of side notes:
    – Most of the size of the header is because you’re using a large image for the logo.
    – You need to check your Google Map API Key

    Let me know if you need more help

    Thread Starter morts81

    (@morts81)

    9 years, 2 months ago

    Thanks so much for this, it’s certainly helped to bring the header size down.

    The menu bar below however still seems to be limited by the search bar, or similar. Ideally I’d like to have this half the height (with text smaller if necessary) and then all the pull down menu’s would also be shorter.

    Any ideas how to close the loop?

    j09

    (@j09)

    9 years, 2 months ago

    @morts81

    No problem,

    Ok, just remove whatever you added before and add the code below instead. That should be closer to your desired effect. 

    
.navbar-nav a {
    padding: 0px 35px 0 0;
}

#search {
    padding: 0 10px 0 0;
    margin: 0 auto;
}

#main-nav {
    margin: 0 auto;
    padding: 0;
}

#logo {
    padding: 5px 0 5px 0;
}

.navbar-toggle {
    padding: 0 13px;
}

    Let me know if it still needs a nudge here or there.

    • This reply was modified 9 years, 2 months ago by j09.
    Thread Starter morts81

    (@morts81)

    9 years, 2 months ago

    You are a champion kind sir.

    Thanks for the help and the prompt response.

    j09

    (@j09)

    9 years, 2 months ago

    @morts81

    You’re welcome and I’m glad you got it sorted out.

Viewing 5 replies - 1 through 5 (of 5 total)

The topic ‘Reduce Header & Menu Height’ is closed to new replies.