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!

Site Links

Recommended

Join Our Newsletter

* indicates required
We respect your privacy and do not tolerate spam and will never sell, rent, lease or give away your information (name, email, number, etc.) to any third party. Nor will we send you unsolicited email.
Joomla51 - Mullaghmore, Co. Sligo, Ireland
Joomla51.com is not affiliated with or endorsed by the Joomla! Project or Open Source Matters.
The Joomla! name and logo is used under a limited license granted by
Open Source Matters the trademark holder in the United States and other countries.

We use cookies on our website. Some of them are essential for the operation of the site, while others help us to improve this site and the user experience (tracking cookies). You can decide for yourself whether you want to allow cookies or not. Please note that if you reject them, you may not be able to use all the functionalities of the site.

Ok