Hi Wittensworld,
Whether a header area extends the full width or not depends on the CSS code. With the right styling, it’s possible to turn a boxed header into a full-width header. Sometimes the HTML markup also needs some retouching, but not always.
If you’ve got a link to your site, I could help you work out the CSS styles to accomplish your goal.
Cheers!
-Maria Antonietta
Hi Maria,
Thanks, I really appreciate your help.
My site is http://wittensworld.com
Much appreciated.
Simon
Hi Simon,
Adding these 2 CSS rules would make your header full width. You can use a custom CSS editor or a child theme so your mods will be preserved on the next theme update:
.logo-wrap {
width: 100%;
}
.logo-wrap img {
width: 100%;
height: auto;
}
If your theme doesn’t provide a custom CSS editor, this plugin will do the job just fine:
https://ww.wp.xz.cn/plugins/simple-custom-css/
I hope this helps 🙂
hi @wittensworld, thanks for using my theme!
This is easy to solve:
open header.php file with a code editor and replace this code ( from line 36 to line 45):
<div class="container header-container">
<div class="header-inner">
<div class="logo-wrap">
<?php redwaves_logo(); ?>
</div><!-- .logo-wrap -->
<div class="header_area-wrap">
<?php redwaves_header_area(); ?>
</div><!-- .header_area-wrap -->
</div><!-- .header-inner -->
</div><!-- .container -->
with this code:
<div class="logo"><?php redwaves_logo(); ?></div>
now add the following CSS rules to your style.css file or use the Custom CSS option ( Appearance => Customize => Design & Layout => Custom CSS ):
.site-header {
background-color: #19120a;
}
.logo img {
display: block !important;
width: 100% !important;
}
.secondary-navigation {
margin-top: 0 !important;
}
but this is not the best way. your site header will look ugly on widescreens .
Here is a better way:
use the suite as a background for the entire header and fade its left and right corners with a strong color #19120a.
Now use this CSS code to apply the background and center it in the middle of header:
.site-header {
background: url( /suit-tie.jpg ) no-repeat center center #19120f;
}
Now create a transparent 200×90 pixels .PNG logo (Witten’s World) and apply it using the Customizer.
You could add the other text (achieve more..) to a Text widget and style it using CSS. This will look more Professional!
Btw, you should create a child theme. If you apply these changes to the parent theme files, you will lose them next time you update your theme.
We have a dedicated forum for Support https://forum.themient.com
and I would like to invite you to join our community 🙂
@maria Antonietta Perna, thanks for your help
We do have a Custom CSS option ( Appearance => Customize => Design & Layout => Custom CSS )
