Return to previous page

Padding on sticky header will not go away with custom css.

This topic has 15 replies, 3 voices, and was last updated 9 years ago ago by Eva Kemp

RasterEyes

Participant

November 10, 2015 at 00:45

Hi, I am trying to remove the padding on the sticky header and it very strangely will not away with custom css. I did a hard refresh on the page and using developer tools you can see that the original padding of 20px (for top and bottom) has been replaced with 0px (all around), but the padding is still showing up on the div.

Here is a link to the page: http://everybodycolors.com/test/

And here is a screen shot illustrating the issue: http://everybodycolors.com/images/paddingIssueScreenShot.png

Any ideas?

Thanks

Jason

#98548 Copied

14 Answers

Eva Kemp

Support staff

November 10, 2015 at 10:27

Hello,

I don’t see fixed header on your site.
Have you disabled it?
Please provide us with wp-admin panel credentials in Private Content.

Regards,
Eva Kemp.

#98615 Copied

RasterEyes

Participant

November 10, 2015 at 23:42

That’s strange. The fixed header comes up for me when I go to the homepage and scroll down. Login info in private content.

Please, contact administrator
for this information.

#98759 Copied

Jack Richardson

Support staff

November 11, 2015 at 08:51

Hello,

There is Internal Server Error when trying to access WP Dashboard.
Please check it.

Best regards,
Jack Richardson.

#98786 Copied

RasterEyes

Participant

November 11, 2015 at 15:48

Really? I have no problem accessing my dashboard. What browser are you using?

#98883 Copied

Jack Richardson

Support staff

November 11, 2015 at 16:03

Hello,

The error persists in Firefox and Chrome browsers:
http://storage6.static.itmages.com/i/15/1111/h_1447254191_3200523_6acabae580.png

Best regards,
Jack Richardson.

#98891 Copied

RasterEyes

Participant

November 11, 2015 at 16:15

That’s very strange. I looked at the error log on my server and don’t see anything. I tried deactivating all the plugins I am not currently using. Maybe that will help?

#98893 Copied
Jack Richardson

Support staff

November 11, 2015 at 16:41
Hello,

I was able to access.
I’ve added this code in child style.css file:
```
.fixed-header-area .container>.navbar-collapse {
    display: table-cell !important;
}
```
Please clear browser cache and check fixed header now.

Best regards,
Jack Richardson.
#98899 Copied
RasterEyes

Participant

November 12, 2015 at 07:38

The padding is still there, but at least the nav bar itself is a bit slimmer and the buttons are in a better place now, although I wish the buttons had a tiny bit of space between them and the website logo/banner, but for some reason I can’t call to any of the stuff in the sticky header with css and I don’t understand why. Here are some screen shots of other issues with the sticky header that I am unable to alter with css for whatever reason:

At mobile size the shopping cart icon drops below the header area:
https://everybodycolors.com/images/mobileSizeShoppingCartProblem.png

At tablet size both the mobile menu and the standard menu appear on top of eachother:
https://everybodycolors.com/images/tabletSizeMenuProblem.png

I wish the css on this sticky header weren’t so stubborn and I’d fix these problems myself instead of bothering you about it. Thanks again for all of your help!

#98999 Copied
Jack Richardson

Support staff

November 12, 2015 at 13:25
Hello,

1. Try to use the following css code to increase space between logo and menu in fixed header:
```
.fixed-header-area .header-logo {
    padding-right: 60px !important;
}
```
2. I’ve added the css code to fix the problem in mobile view:
```
@media only screen and (max-width: 992px) {
.navbar-right {
    margin: initial !important;
}
.cart-bag {
    margin-top: -35px !important;
    right: 20px !important;
}}
```
Please clear browser cache and check your site.

Best regards,
Jack Richardson.
#99081 Copied
RasterEyes

Participant

November 12, 2015 at 15:26

Great, thanks!

The mobile menu and the standard menu are still appearing on top of each other at tablet size, though. See example image:
https://everybodycolors.com/images/tabletSizeMenuProblem.png

Could you also list the screen width stops for the responsive design (i.e. @media only screen and (max-width: 992px) and what the other max-width settings are)? Thanks again!

#99110 Copied
Jack Richardson

Support staff

November 12, 2015 at 20:18
Hello,

I’ve added this code in child style.css file:
```
.navbar-collapse.collapse {
    display: none !important;
}
```
Please check now.

Best regards,
Jack Richardson.
#99167 Copied
RasterEyes

Participant

November 13, 2015 at 02:16

Looks good, thank you! But now the nav buttons are jumping above the shopping cart again in the 992px – 1200px range. It seems like the div for the header-logo is pushing the navbar there, but the css says the max-width should be 250px, yet it is over 600px. Here is an image illustrating the problem: https://everybodycolors.com/images/navBarPlacementProblem.png.

This should hopefully be that last issue with regards to the sticky header, thanks!

#99209 Copied

RasterEyes

Participant

November 13, 2015 at 15:58

So, I was able to make the div smaller, but for some reason it has a huge margin on the right side that is still causing the shopping cart button to get pushed down. When I try to remove the margin with css it doesn’t change anything. Example: https://everybodycolors.com/images/cantGetRidOfMargin.png

Sorry for all the trouble. I think this is an excellent theme, but for whatever reason the sticky header is a real pain to edit with css. Thanks for all your support!

#99316 Copied
Eva Kemp

Support staff

November 14, 2015 at 16:26
Hello,

Please add this code in child style.css file:
```
@media (min-width: 992px) and (max-width: 1200px) {.fixed-header-area .collapse {
    display: table-cell !important;
    width: 400px;
}}
```
Regards,
Eva Kemp.
#99444 Copied
Tagged: custom css, padding, sticky header, themes, woocommerce, wordpress
Viewing 15 results - 1 through 15 (of 15 total)