Jump to content


Photo
- - - - -

How to Remove Extra space Under Elements in Header

header space

  • Please log in to reply
5 replies to this topic

#1 photomom86

photomom86

    Advanced Member

  • Members
  • PipPipPip
  • 57 posts
  • Country: Country Flag

Posted 26 August 2014 - 12:15 PM

I've attached a screen shot. I have 2 columns in my header area. One has a media box (contains my logo) the other has a simplenav and a mediabox (contains the social media icons and a google ad). Under these two columns my nav bar sits. There is a lot of extra space between the bottom of my columns and the top of my navbar.

 

Can you help me? I want to decrease the amount of space between the two. Thanks!

 

Attached File  Header Spacing.png   71.55KB   0 downloads

 



#2 Danny

Danny

    Is Awesome!

  • Moderators
  • 16952 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 26 August 2014 - 12:53 PM

Hi,

 

Try adding the following to your custom CSS:

 

#mediaboxum8e7y .pl-section-pad,
#mediaboxum8e7y p {
  margin-bottom: 0;
}


#3 photomom86

photomom86

    Advanced Member

  • Members
  • PipPipPip
  • 57 posts
  • Country: Country Flag

Posted 26 August 2014 - 05:41 PM

I believe that worked. how about decreasing the space between the simplenav and media box?



#4 Danny

Danny

    Is Awesome!

  • Moderators
  • 16952 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 27 August 2014 - 11:01 AM

You will need to inspect the elements using Chromes dev tools and then reduce the margin/padding on those elements.



#5 photomom86

photomom86

    Advanced Member

  • Members
  • PipPipPip
  • 57 posts
  • Country: Country Flag

Posted 27 August 2014 - 01:24 PM

@Danny, ok I inspected the element with chrome dev tols, and I can see that for some reason there are <p> tags around the google ad....I can take them out in dev tools and can see the difference (and the effect I want) but once I reload the page it's back to the same. There are no <p> tags in my google ad code in the mediabox.....



#6 Danny

Danny

    Is Awesome!

  • Moderators
  • 16952 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 28 August 2014 - 08:48 AM

You most likely have a space or line break in before where you added your Google code. If you remove the line break the p tag may be removed. If that doesn't resolve the issue you're going to need to use that MediaBoxes ID and then target the p tag too, like I did in the code above, then remove margins.







Also tagged with one or more of these keywords: header, space