You can use your browsers Inspect Element tool (right-click your site) to find the classes/styles of any element, allowing you to modify them.
Add the below custom CSS code into your Child Theme style.css file, or using a Custom CSS plugin.
How can I adjust the theme using the whole width of my page?
@media (min-width:768px) {
.col-full {
max-width: none;
}
}
Furthermore I’d like to remove the margin between the header and the body
#masthead.site-header {
margin-bottom: 20px;
}
I like to increase the height of my header
@media (min-width:768px) {
.site-header {
padding-top: 4em;
}
.site-header .site-branding {
margin-bottom: 4em;
}
}
Hope this helps.
-
This reply was modified 7 years, 5 months ago by
ThemeSumo.
Thank you very much @themesumo. Your Post helped me a lot. I did the adjustments with a css plugin, but I think its better to build a Child Theme.
I tried a lot with the CSS Plugin but I’m still dealing with some issues regarding the stylesheet.
1. How can I adjust the margin of the navigation, i tried this one, but it doesnt work (So i adjust the max-height to 0px to hide the main navigation)
@media (min-width:768px) {
.main-navigation ul.nav-menu {
max-height: 0px;
overflow: hidden;
margin-left: 0;
padding-left: 0;
}
And the second Issue is about the text position in the Footer that says “© 2016
Storefront gestaltet von Woocommerce”. I would like to change the position to the center of the footer.
I would be very thankful, if you could help me again 🙂
I don’t see any margins to change on your main menu, can you be more precise and I’ll take another look.
To centralize your footer text just add this to your custom CSS:
.site-info {
text-align: center;
}
To take control over the footer credits I am using this little plugin.
remove-woocommerce-footer-credit
Not only can you remove it, but also put anything you like in there and center or align it:
You might want to give that a try!
If you simply do not want to show the footer credits, you can put this code into your child theme’s css:
footer .site-info { display:none; }
I can not see any margin below your navigation eather?
Maybe you need to clear cache?
If you are still looking to build a childtheme for Storefront, you can download one for free here:
storefront-child-theme
Thanks for your replies.
I’ll try to be more precisely. I just wanted to know how to adjust the margin of the “site navigation”. I did this screenshots with the red arrows for a better understanding:
Site Nav
Thank you. 🙂
-
This reply was modified 7 years, 5 months ago by
mcrl2016.
-
This reply was modified 7 years, 5 months ago by mcrl2016.
@media (min-width:768px) {
.site-header .site-branding {
margin-bottom: 5em;
}
}
This should do the trick, adjust the value to suit, the default value is 8em.
Hope this helps.
Hello,
I can not see that screenshot, if I follow that link I get all sorts of warnings of virusses etc.
But I think I know what you mean.
I like to use this free plugin Siteorigin CSS editor
It has the option to just click in the field you want some css changes made and generate that css for you.
Annie
If its the main primary menu you would like to target this code should do it:
#menu-primary-menu.menu.nav-menu {
margin-top: 20px;
margin-bottom: 20px;
}
But do try that plugin, its very helpfull!
