Customizing the Widely Theme Header using css

emjaybiz · Member · Mar 22, 2013 at 6:44 am
Copy link

Add topic to favorites
I’ve never edited a theme using the css editor before so this is a bit new to me.

I’d like to reduce the size of the header area In the Widely Theme so that I can make use of a thinner header. It would be great if I could make the area reactive to the height of the image that I use in the Header like the image plus 36 pixels for example. I’ve got images to show what I’d like to do better than I can describe it.

The blog I need help with is: (visible only to logged in users)
thesacredpath · Member · Mar 22, 2013 at 2:53 pm
Copy link
Delete the informational text in the CSS edit page and then paste the following and adjust the 80px value (80 is what it is now). If you want to go to 0 (zero) then just make that “0” and not 0px.
```
.site-header .custom-header {
margin-bottom: 80px;
}
```
emjaybiz · Member · Mar 22, 2013 at 8:03 pm
Copy link
Thanks thesacredpath, that was super easy.

Do you also know how I can do the same thing to the margin between the navigation and the header and between the top of the page and the floating white box in the center of the page.?

Basically I’m trying to move all of the information at the top of the site into a more compact space so that I can show more of the slide show.

Thanks for your help.
thesacredpath · Member · Mar 22, 2013 at 8:16 pm
Copy link
Add this to the custom CSS and adjust the top and bottom margins as you desire.
```
.site-header {
margin-top: 50px;
margin-bottom: 50px;
}
```
Top margin between the white container and top of browser window.
```
.site {
margin-top: 80px;
}
```
thesacredpath · Member · Mar 22, 2013 at 8:22 pm
Copy link
The issue with the header is that it goes the full width of the header area (a lot of white space to the right of the logo), but this can be cured with a little trickery. Add this to your custom CSS and then play with the 50px top margin value for custom header.
```
.main-navigation {
position: relative;
z-index: 1000;
}

.custom-header {
margin-top: 50px !important;
}
```
emjaybiz · Member · Mar 22, 2013 at 9:42 pm
Copy link
thesacredpath, you are ++good. Thanks much
thesacredpath · Member · Mar 22, 2013 at 10:38 pm
Copy link
You are welcome.

No items found.