Return to previous page

CSS for reducing header height? - by SmallCreators

This topic has 12 replies, 3 voices, and was last updated 6 years, 7 months ago ago by Rose Tyler

SmallCreators

Participant

September 9, 2017 at 11:57

Hello,

I’m using Xstore Child with header type “Variant Simple”. I’d like the header to be at least 1/3 less in height. Can you help me with CSS for that and tell me where to put it in theme options? Thank you!

Please, contact administrator
for this information.

#172012 Copied

11 Answers

Amzy Leel

Participant

September 10, 2017 at 06:04

Hi,

You have some extra adding for your menu.
I am not sure where did you apply them.

Anyhow add this css code in 8theme options > styling > custom > global custom css

#172022 Copied

Amzy Leel

Participant

September 10, 2017 at 06:05

Sorry.. forgot to give the css.
use this css :

.header-simple .menu-wrapper .menu > li > a { padding: 2em 0.77em !important; }

#172023 Copied

SmallCreators

Participant

September 11, 2017 at 08:46

Thank you – it worked! 🙂

What do you mean by “extra adding”, BTW? I have some other custom css, but nothing to do with the menu in the header … ?

#172067 Copied

SmallCreators

Participant

September 11, 2017 at 08:51

PS. Additional question:

My client wishes a fixed header if we succeeded in reducing its height. I have not set it for fixed but the last entry on the menu moves to center during scroll.

Is there anything that can be done about that? (See screenshot in private content)

Please, contact administrator
for this information.

#172069 Copied

SmallCreators

Participant

September 11, 2017 at 08:52

I mean “I have *now* set it for fixed”. Sorry for the confusing typo.

#172070 Copied

SmallCreators

Participant

September 11, 2017 at 09:59

Absolutely last question for now, I promise:

The header with (hamburger) navigation is too large now on mobile when the page loads, but looks fine when one scrolls down. (See attached screenshots)

What can I do to fix this?

Please, contact administrator
for this information.

#172090 Copied
Rose Tyler

Support staff

September 11, 2017 at 12:37
Hello,

Please change previous code to:
```
.page-wrapper .header-simple .menu-wrapper .menu > li > a { 
    padding: 2em 0.77em; 
}
.fixed-header.header-color-dark .menu li a {
    padding: 0.77em 0.7em;
}
.fixed-header > .container {
    padding-top: 0px;
    padding-bottom: 0px;
}
.fixed-header .navbar-header {
    display: none;
}
```
The header with (hamburger) navigation is too large now on mobile when the page loads, but looks fine when one scrolls down. (See attached screenshots)

– Please provide wp-admin access in Private Content.

Regards
#172108 Copied
SmallCreators

Participant

September 12, 2017 at 09:06

Thank you again! The header looks good now on laptop/desktop!

I’ve provided a guestlogin for you below, for the mobile issue.

Please, contact administrator
for this information.

#172194 Copied

Rose Tyler

Support staff

September 12, 2017 at 10:46

Fixed. Please check.

Regards

#172210 Copied

SmallCreators

Participant

September 13, 2017 at 09:15

It is – thank you very much. Quick and efficient support and much appreciated! 🙂

#172304 Copied

Rose Tyler

Support staff

September 13, 2017 at 10:06

You’re welcome!

Regards

#172306 Copied
Tagged: header, height, woocommerce, wordpress
Viewing 12 results - 1 through 12 (of 12 total)