Recent
Categories
View Replies (5)

J51_Novah container_header height

  1. Issue
0
Votes
Undo
  1. Hammur
    Hammur
  2. Sherlock Holmes
  3. Commercial Templates
  4. Saturday, 05 October 2019
  5.  Subscribe via email
Hi,
Is it possible to reduced the height of the container_header, the white area above the main menu where the logo is?

Due to the logo of a new site I'm developing the white space between the logo and the menu doesn't really look very good with the logo.
So I would like to reduce/fit the "container_header" height so that the logo is in contact with the main menu and the black top beam.
Just adding e.g. "height=80px" to it doesn't really work as the main menu doesn't follow and don't know if it might effect other things. It looks like the height is automatically calculated based on the content in it?

see attached image

And a little note: I initially created this question in my Firefox browser, but your "submit" button wouldn't work for me there, so I couldn't post this.
So I then tried Google Chrome and got to post this question there :)
Attachments (1)
Header example.png Header example.png
Responses (5)
ciaran
ciaran
Love Fool Sherlock Holmes The Voice
Notable Answerer Notable Answerer
Accepted Answer Pending Moderation
0
Votes
Undo
Hello

To amend try adding the following to the Custom CSS field of your templates parameters (Extensions -> Templates -> [YourTemplateStyle] -> Custom CSS)....

(edit to taste)

.header_nav {

    margin-top: -20px;

}


Thank you for the heads up regarding submitting to the forum. We will look into this!

Ciaran
  1. more than a month ago
  2. Commercial Templates
  3. # 1
Hammur
Hammur
Sherlock Holmes
Accepted Answer Pending Moderation
0
Votes
Undo
Hi,

That CSS only move up the main menu which together with together with the below looks fine at first, until you scroll down.
We're also using the Sticky header and it gets half hidden behind the screen :( 
.header_nav {

    margin-top: -34px;

}

#container_header {

    height: 104px;

}


I've linked our site if you want to have a look.
References
  1. https://update.konsult.fo/
  1. more than a month ago
  2. Commercial Templates
  3. # 2
ciaran
ciaran
Love Fool Sherlock Holmes The Voice
Notable Answerer Notable Answerer
Accepted Answer Pending Moderation
0
Votes
Undo
Thank you for detailing. Could you try the following instead...

@media only screen and (min-width: 1180px) {

.header_nav {

    margin-top: -33px;

    width: 1180px;

}

.is-sticky .header_nav {

    margin-top: 0;

}}


Ciaran
  1. more than a month ago
  2. Commercial Templates
  3. # 3
Hammur
Hammur
Sherlock Holmes
Accepted Answer Pending Moderation
0
Votes
Undo
Hi, I've figured that this seems to work fine, which will reduce the container_header section and have the below follow up without effecting the sticky-header.
#container_header {

    height: 104px;

}

.sticky-wrapper {

    margin-top: -34px;

}


Your code also works decent, but it changes the sticky header a little to be full width instead of the default reduced one.
And the main menu get situated on top of the black page heading section instead of being half centred with it.
  1. more than a month ago
  2. Commercial Templates
  3. # 4
ciaran
ciaran
Love Fool Sherlock Holmes The Voice
Notable Answerer Notable Answerer
Accepted Answer Pending Moderation
0
Votes
Undo
Excellent... thank you for the update and for sharing your solution.

Ciaran
  1. more than a month ago
  2. Commercial Templates
  3. # 5
  • Page :
  • 1


There are no replies made for this post yet.
Be one of the first to reply to this post!