Link to home
Start Free TrialLog in
Avatar of Mitzie Mathis
Mitzie Mathis

asked on

Remove space between the header menu and page title.

There is a huge space between the header and page title. I've tried adding the following css but nothing helps. How can I get rid of the space?
.site-inner {
    margin-top: 0 !important;
	}	


.site-header {
    padding: 25px 0;
}

.page-header {
    margin: 0 auto;
    min-height: 1px;
} 
/* Hide title on About Us page */
.page-id-our-process .main-title__primary { display: none; }
body.page .entry-header .entry-title {
margin-bottom: 10px;
}
.middle-align h1 {
margin: 0;
padding: 0;

Open in new window

Avatar of David S.
David S.
Flag of United States of America image

Please show us an example page. A few style rules are insufficient to diagnose your issue.
Avatar of Mitzie Mathis
Mitzie Mathis

ASKER

You can reduce it by 25px by changing:
.site-header {
    padding: 25px 0;
}

Open in new window

to:
.site-header {
    padding: 25px 0 0 0;
}

Open in new window


Did you know that what you had is equivalent to this (which adds 25px of padding at the bottom)?
.site-header {
    padding: 25px 0 25px 0;
}

Open in new window

Note that the div with class .mega-container has a 20px margin too, which you may like to reduce:

.mega-container {
    margin-top: 20px;
}

Open in new window

It's still the same.
ASKER CERTIFIED SOLUTION
Avatar of David S.
David S.
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Is there a way to find out what file it's being pulled from?
Which browser are you using? In Chrome, you can right click on an element in the page and choose "Inspect". This opens the dev tools with the chosen element selected.

You can change the selected element (if it's not the one you want) by clicking a different html tag element in the Elements tab of the dev tools, and the style being applied to that element will show up in the Styles part of the dev tools. The css file that each style rule comes from is shown to the right of the rule.
It's in orange.css.

In addition to what Terry said, text editors made for programmers usually provide a tool to search for a string in multiple files with a specified file name filter (e.g. "*.css").
Thanks guys!
Thanks guys!