- This topic has 4 replies, 2 voices, and was last updated 7 years, 5 months ago by
.
-
Posts
-
Hiya, I have been struggling with the Foodie Pro header part. Basically what I want is to have it CENTERED and the size as it is at the moment which is 600 x 250. For some reason, whatever I do, I cannot get it fixed.
The following is from functions.php
//* Add support for custom header.
add_theme_support( 'custom-header', array(
'width' => 600,
'height' => 250,
'header-selector' => '.site-title a',
'header-text' => false,The following is from the CSS:
Site Header
----------------------------------------------------------------------------- */.site-header {
background-position: center;
padding: 20px 0;
}.site-header .wrap {
padding: 17px 0;
}/* Title Area
--------------------------------------------- */.title-area {
display: inline-block;
margin: 0;
padding: 17px 0;
width: 600px;
}.header-image .site-description {
line-height: 0;
}.header-image .title-area {
margin: 0 auto;
max-width: 600px;
padding: 0;
}.site-title {
font-size: 37px;
font-weight: 600;
letter-spacing: 2px;
line-height: 0.8;
margin: 17px 0;
text-transform: uppercase;
}.site-title a {
color: #010101;
font-style: normal;
}.site-title a:hover,
.site-title a:focus {
color: #010101;
}.site-description {
color: #aaa;
font-family: "Muli", Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: 300;
letter-spacing: .5px;
margin: 0;
text-transform: none;
}/* Full width header, no widgets */
.header-full-width .title-area,
.header-full-width .site-title {
text-align: center;
width: 100%;
}.header-image .site-description,
/* Logo, hide text */
.header-image .site-title > a {
-webkit-background-size: contain !important;
background-size: contain !important;
display: block;
height: 250px;
margin: 10px auto;
max-width: 600px;
text-indent: -9999px;
}.header-image .site-header {
background-position: center !important;
background-size: 600px 250px !important;
}.header-image .site-title a {
float: none;
min-height: 250px;
min-width: 600px;
}I would really appreciate if someone can help. Thanks a bunch
Regards
Funda
http://www.honeydarko.comThere are a few things you need to do to fix this. Once you fix it, you will not be able to use the header-right widget area, if it is activated for your child theme.
You have background-position: center !important; in the wrong CSS. It belongs in .site-title a because that's where the image is located.
Next, you have to expand the title area to 100%. Change max-width in .header-image .title-area to 100% and change the width of .title-area to 100%.
Regards,
Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?Thank you for your answer. But nothing happens even if I do that. I tried to clean out a bit and this is what I have now:
Site Header
----------------------------------------------------------------------------- */.site-header {
background-position: center;
padding: 20px 0;
}.site-header .wrap {
padding: 17px 0;
}/* Title Area
--------------------------------------------- */.title-area {
display: inline-block;
margin: 0;
padding: 17px 0;
}.header-image .site-description {
line-height: 0;
}.header-image .title-area {
width:100%;
}.site-title {
font-size: 37px;
font-weight: 600;
letter-spacing: 2px;
line-height: 0.8;
margin: 17px 0;
text-transform: uppercase;
}.site-title a {
color: #010101;
font-style: normal;
}.site-title a:hover,
.site-title a:focus {
color: #010101;
}.site-description {
color: #aaa;
font-family: "Muli", Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: 300;
letter-spacing: .5px;
margin: 0;
text-transform: none;
}/* Full width header, no widgets */
.header-full-width .title-area,
.header-full-width .site-title {
text-align: center;
width: 100%;
}.header-image .site-description,
/* Logo, hide text */
.header-image .site-title > a {}
.header-image .site-header {
}
.header-image .site-title a {
background-position: center !important;
}You still have background position in the wrong place. It goes in .site-title a.
You didn't change the width in .title-area. You removed it.
You changed the width incorrectly in .header-image .title-area. The instruction said change the max-width, not change it to width.
Regards,
Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?Is this the correct way because it still doesnt work:
Site Header
----------------------------------------------------------------------------- */.site-header {
background-position: center;
padding: 20px 0;
}.site-header .wrap {
padding: 17px 0;
}/* Title Area
--------------------------------------------- */.title-area {
display: inline-block;
margin: 0;
padding: 17px 0;
max-width: 100%;
}.header-image .site-description {
line-height: 0;
}.header-image .title-area {
max-width:100%;
}.site-title {
font-size: 37px;
font-weight: 600;
letter-spacing: 2px;
line-height: 0.8;
margin: 17px 0;
text-transform: uppercase;
}.site-title a {
color: #010101;
font-style: normal;
background-position: center !important;
}.site-title a:hover,
.site-title a:focus {
color: #010101;
}.site-description {
color: #aaa;
font-family: "Muli", Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: 300;
letter-spacing: .5px;
margin: 0;
text-transform: none;
}/* Full width header, no widgets */
.header-full-width .title-area,
.header-full-width .site-title {
text-align: center;
max-width: 100%;
}.header-image .site-description,
/* Logo, hide text */
.header-image .site-title > a {}
.header-image .site-header {
}
.header-image .site-title a {
}
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.