Home / Forums / DynamiX Support / Header height

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts

  • Marcus Cake
    Participant

    I have switched from Terso to Dynamix. How do I adjust the header height? I have moved logo and menu up to the top to maximise space for content, but the header seems to be a fixed size (despite the opportunity to specify a variable position for branding and menu. There is a slider to minimum width for the header, but I can’t specify a negative number to shrink the header.

    You can see what I mean at http://www.wisdomnetworks.im . I am still having trouble with the sticky header. I have chosen less menu options and used a logo the same size as the Dynamix template to solve that problem (but its threshold for breaking into two lines is quite low.


    Marcus Cake
    Participant

    I added 50px to the logo (width now 267px) and have 7 menu options. This combination caused a page break with logo and menu splitting between lines. I removed six characters from the menu and that has fixed it.

    The logo in sticky menu and normal header are the same size. The combination above does not break the sticky menu (just the normal header). I assume the menu overlays the graphic in the stick header (but doesn’t overlay in the normal header and causes a page break).

    Can the normal menu behave like the sticky menu (and overlay the logo). I am an amateur at this and not sure if I am describing this correctly. You can see it at http://www.wisdomnetworks.im . I’d really appreciate your help on this – the sticky menu has been a source of frustration. I have also turned off all plugins and don’t believe there is a plugin conflict.


    Marcus Cake
    Participant

    I watched that video you suggested and came up with the following – it seems to work … not perfect (logos don’t line up), but adequate.

    .header-wrap {
    height: 85px !important;
    }

    .wrapper {
    padding: 20px 20px !important;
    }

    div.custom-layer {
    height: 85px !important;
    }


    Marcus Cake
    Participant

    Sorry guys … the CSS above also added 20px in padding around the footer. This works better. This is a guess … enjoying the challenge, but not my expertise.

    .header-wrap {
    height: 85px !important;
    }

    .row.content-wrap, #content footer.row {
    margin-top: 20px;
    }

    div.custom-layer {
    height: 85px !important;
    }


    Tom ( Support)
    Keymaster

    Hi Marcus,

    I recommend adding the CSS to Appearance > Theme Options > Customize > Custom CSS.

    This is classed as a customization but heres a little hand,
    #logo {
    width: 200px;
    }

    You can view the comprehensive Custom CSS screencast here, this will give you more information on how to customize elements. On the other hand, you can request customizations through the customization forum here.


    Marcus Cake
    Participant

    Hi Tom. Thanks for heads up on the logo size. My focus is the header height. I have included your CSS as well. The final result is listed below. I needed to add some more CSS and take more menu options out. I discovered that the width of the menu is different in different browsers. This means that the menu can be pushed down a line (ie menu does not appear where intended). I added some CSS to shrink the menu a little and removed some more menu options. All worked well in all browsers EXCEPT safari (which has some strange behaviour when you hover over the menu (the menu is pushed down a few inches).

    #logo {
    width: 267px;
    }

    #nv-tabs a {
    padding: 0px 4px 15px;
    margin: 0px 0px;
    }

    #nv-tabs ul li.hasdropmenu a {
    padding-right: 12px !important;
    }

    .header-wrap {
    height: 85px !important;
    }

    div.custom-layer {
    height: 85px !important;
    }

    .row.content-wrap, #content footer.row {
    margin-top: 20px;
    }

    Except for hovering over the menu in safari (this CSS worked). Very close. I have enjoyed the challenge (and the opportunity to acquire a new skill!) but I’ll need some professional help on this one. I’ll check that minify hasn’t caused the problem first. Might have to go back to a header with lots of white space in the interim.


    Tom ( Support)
    Keymaster

    Hi Marcus,

    Welcome to the world of developing, works fine in one browser, another doesn’t work… It is a case of trial and error with a lot of CSS work.

    Let us know if you need a hand in the customization forum and we can help you out.

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

You must be logged in to reply to this topic.