Loading


Advertisement:

Author Topic: [SOLVED] Bender Red - Remove spacing at top of header  (Read 608 times)

bigfreeads

  • Newbie
  • *
  • Posts: 12
[SOLVED] Bender Red - Remove spacing at top of header
« on: September 29, 2016, 11:13:05 pm »
Hi There,

I am in the process of building my website and have a slight issue where although I know my logo being slanted doesnt help however I would like to minimise the header so it is smaller to save people having to scroll down.

I attach a screenshot where you can clearly see a red spacing above the logo of a couple of centimeters.

How can I remove this I have checked main.css and can see:

#header {
  background-color: #cc0000;
  width: 100%;
  height: auto;
  display: block;
  position: relative;
  margin-bottom: 15px;
  padding-bottom: 10px;
  padding-top: 10px;

« Last Edit: September 30, 2016, 10:01:06 pm by bigfreeads »

bigfreeads

  • Newbie
  • *
  • Posts: 12
Re: Bender Red - Remove spacing at top of header
« Reply #1 on: September 29, 2016, 11:14:29 pm »
I think it is the Height: auto but when changing this I don't want to mess it up on other devices and browsers so what would be the best way to amend it.

teseo

  • Hero Member
  • *****
  • Posts: 5743
Re: Bender Red - Remove spacing at top of header
« Reply #2 on: September 29, 2016, 11:31:43 pm »
Hi,

Rules to modify:

Code: [Select]
#header { padding-top: 0; }

#header #logo {
    padding-top: 10px;
    padding-bottom: 0;
}

.main-search {
    margin-top: 5px;
}

And get rid of <div class="ads_header"

Backup your current styles, apply changes, and then see if mobile view is still OK.

Regards

bigfreeads

  • Newbie
  • *
  • Posts: 12
Re: Bender Red - Remove spacing at top of header
« Reply #3 on: September 30, 2016, 05:40:10 pm »
Thank you for your help.

I have made the changes except removing the header div you mentioned, i just wanted to check first, if I did ever decide to put ads in the header would this cause problems removing that part of code you mentioned ?

I just would like to keep everything in the backend working as it should.

Many thanks once again for taking the time to help me, very much appreciated.
« Last Edit: September 30, 2016, 05:42:56 pm by bigfreeads »

teseo

  • Hero Member
  • *****
  • Posts: 5743
Re: Bender Red - Remove spacing at top of header
« Reply #4 on: September 30, 2016, 07:10:44 pm »
if I did ever decide to put ads in the header would this cause problems removing that part of code you mentioned ?

Yes, that's the container for "Header 728x90" in Bender Theme Settings. But in the meantime you can save 20 pixels changing its style rule:

main.css

.ads_header{width:728px;margin-left:auto;margin-right:auto;padding:10px 0px 10px 0px}

.ads_header{width:728px;margin-left:auto;margin-right:auto;padding:0}

You're welcome. :) Please add [SOLVED] to the title of this thread.

Regards