Flat Style

How to fix space in header ? - Flat Style

How to fix space in header ?

by panteror » Sat Jun 16, 2018 7:11 pm

Hi,

I edit css to have a full logo header but i still have a problem with a space between header and menu.
How to remove it ?
http://www.dowfrance.com/forum/
DoWFrance   Communauté Francophone Days of War   Page d’accueil.png
Thanks
panteror
Registered User
Posts: 38
Joined: Sun Aug 09, 2015 3:33 pm
Contact:

Re: How to fix space in header ?

by eeji » Tue Jun 19, 2018 5:27 pm

Theres no gap on my screen, I'm guessing you found it? The banner looks great and really compliments the style :)
User avatar
eeji
Jr. Style Validator
Posts: 911
Joined: Fri Dec 12, 2008 9:08 pm
Location: Manchester, UK
Contact:

Re: How to fix space in header ?

by stupiduck » Wed Aug 08, 2018 9:47 pm

Hello,

I have the same problem: a gap of 5px.
What is the solution?

Thanks and congratulations for this great style!
stupiduck
Registered User
Posts: 4
Joined: Mon Aug 29, 2011 3:00 pm
Contact:

Re: How to fix space in header ?

by panteror » Thu Aug 09, 2018 8:23 am

Hi,
Sorry to have forgotten to published my solution :

Here my modification of file common.css
Note that my header is 1170x240 so i changed the width of the forum.

Code: Select all

line 142
.wrap {
	margin: 0 auto;
	max-width: 1170px;
	min-width: 625px;
	padding: 0px;
}
line 179
.site_logo {
	display: none;
	width: 200px;
	height: 68px;
}
line 187 
.site-description {
	display: none;
	padding-left:15px;
}

line 202
.headerbar {
	padding: 0px;
	background: url(http://www.dowfrance.com/forum/styles/flat-style-blue/theme/images/site_logo_dowfrance.jpg);
	background-repeat: no-repeat;
        max-width:1170px;
	width: 100%;
	height: 240px;
	background-size: 100% auto contain !important;
panteror
Registered User
Posts: 38
Joined: Sun Aug 09, 2015 3:33 pm
Contact:

Re: How to fix space in header ?

by stupiduck » Thu Aug 09, 2018 1:30 pm

Hello panteror,

Thank you for your quick answer and clear code!
I see that you have set display to none for .site_logo and .site-description, and that you have a background image (thus, no link there).

I wanted to keep a logo (with link), which is bigger than the original, and no padding. At this point I got same extra space as you: 5px between the logo and the black bar.

I found a solution which is not elegant (in coding), but which works. Here is my modification of file common.css.
I use negative margin-bottom.

Code: Select all

.logo {
	float: left;
	width: auto;
	padding: 0px;
}

Code: Select all

.site_logo {
	display: inline-block;
	width: 300px;
	height: 300px;
	margin-bottom: -5px;
}

Code: Select all

.headerbar {
	padding: 0px;
	margin-bottom: -5px;
}
stupiduck
Registered User
Posts: 4
Joined: Mon Aug 29, 2011 3:00 pm
Contact:

Re: How to fix space in header ?

by panteror » Thu Aug 09, 2018 3:22 pm

stupiduck wrote:Hello panteror,

Thank you for your quick answer and clear code!
I see that you have set display to none for .site_logo and .site-description, and that you have a background image (thus, no link there).

I wanted to keep a logo (with link), which is bigger than the original, and no padding. At this point I got same extra space as you: 5px between the logo and the black bar.

I found a solution which is not elegant (in coding), but which works. Here is my modification of file common.css.
I use negative margin-bottom.

Code: Select all

.logo {
	float: left;
	width: auto;
	padding: 0px;
}

Code: Select all

.site_logo {
	display: inline-block;
	width: 300px;
	height: 300px;
	margin-bottom: -5px;
}

Code: Select all

.headerbar {
	padding: 0px;
	margin-bottom: -5px;
}
To make header clickable, try :

Open overall_header.html
find

Code: Select all

<div class="headerbar" role="banner">
add after

Code: Select all

<a class="bglink" href="{U_SITE_HOME}"></a>

in order to have

Code: Select all

<div class="headerbar" role="banner"><a class="bglink" href="{U_SITE_HOME}"></a>
you can use {U_INDEX} instead of {U_SITE_HOME}, it depends of your website

then add class bglink at the end of the common.css

Code: Select all

.bglink {
   position: absolute;
   width: 100%;
   height: 100%;
}
it should works
panteror
Registered User
Posts: 38
Joined: Sun Aug 09, 2015 3:33 pm
Contact:

Re: How to fix space in header ?

by stupiduck » Thu Aug 09, 2018 4:55 pm

Excellent! Thank you! 8-)
stupiduck
Registered User
Posts: 4
Joined: Mon Aug 29, 2011 3:00 pm
Contact: