Tagged: ,

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #15133

    I’m using Coherence theme and want to reduce the header height by approx 50% (thickness, not position on page).

    How would I do this – I need the actual css code modification and also where to make the change.

    Many thx.

    PS; LOVEING the theme!

    #86331

    Hi ATX,

    The header height is a combination of the logo height, its padding and the navigation and its height and margin. Try adding the following CSS to your Quick CSS (located under the Styling Tab in the theme options) or the custom.css file in the css folder of your theme files:

    div .logo {
    padding: 20px 0 13px 0;
    min-height: 100px;
    }
    #header .container {
    min-height: 160px;
    }
    .main_menu {
    height: 15px;
    margin: 9px 0;
    }

    Play with the above values to get your desired result. Its a bit hard to give exact changes without looking at your site but that should give you enough control to make most of the difference.

    Regards,

    Devin

    #86332

    Thx Devin, esp for quick response.

    I’ve played around with your suggested code (see my edit below) and it’s helped.

    My efforts are trial and error since I have a sketchy understanding of CSS.

    But now buttons change depending which page I’m on (see site: http://beastsyndicate.com/wordpress).

    It would be ideal to have them always centered in header bar, as per image/logo (but OK if they are in line with base of logo). I just need it to be consistent across all pages. FYI, I’m using a 50px high image/logo.

    Appreciate any further guidance you can offer.

    My edits to your code:

    div .logo {

    padding: 20px 0 13px 0;

    min-height: 10px;

    }

    #header .container {

    min-height: 10px;

    }

    .main_menu {

    height: 1px;

    margin: 0px 0;

    }

    #86333

    It looks like there is an additional class on certain pages. We’ll need to clear it out. Try adding the following CSS to your Quick CSS (located under the Styling Tab in the theme options) or the custom.css file in the css folder of your theme files:

    .shift_menu .main_menu {
    margin-top: 0px;
    }

    Regards,

    Devin

Viewing 4 posts - 1 through 4 (of 4 total)

The topic ‘reduce header height’ is closed to new replies.