Are these header mods possible with Twenty Sixteen and would you help me

andrewhallnz · Member · Dec 9, 2015 at 9:06 pm
Copy link

Add topic to favorites
Hi there – I don’t seem to be having much success in getting answers to my questions here but here’s hoping. My main account is premium so I can use CSS.

I would like to switch sufinz.com, which is still under construction but well on its way, from Twenty Ten to Twenty Sixteen. But there are some things about Twenty Sixteen I want to change – especially the header area. I have a test site here:

https://sufiordernzw.wordpress.com/

I want a header image as on the test site but there is way, way too much vertical whitespace in the header layout – the first text of the post is almost at the bottom of my screen. Also, I would much prefer to have the top horizontal menu below the image.

Are these changes possible and are they likely to be very difficult. The one I am least certain about is if I can get the menu below the image. I do not want the menu as a side menu as I also want to be able to use a single column layout.

And… would anyone be willing to help me when I get stuck?

Thank you for your time

Andrew

The blog I need help with is: (visible only to logged in users)
andrewhallnz · Member · Dec 10, 2015 at 4:28 am
Copy link
(not sure why the text is so large, sorry)

I’m making some progress but still very much in need of help. It does appear it is possible to swap image and menu with CSS and also to reduce the white-space around the post title.

But there is a big block of text between the image and the post title that I don’t seem to be able to reach. Also it is clear that my method for moving the menu is not stable for different tab widths.
```
@media screen and (min-width: 600px) {
.main-navigation {
    position: relative;
    z-index: 10;
    top: 300px;
}
.header-image {
    position: relative;
    top: -70px;
		margin-bottom: 5px;
}
.site-header {
		padding-bottom: 5px;
		padding-top: 5px;
}
h1.entry-title {
		font-size: 32px;
		margin-bottom: 10px
}
```
filterjoetest · Member · Dec 11, 2015 at 8:47 pm
Copy link
I also didn’t like the huge amount of white space for my modest text/style. This reduced the vertical white space for me:
```
.site-header {
	padding-top: 24px;
	padding-bottom: 24px;
}
```
If that’s still too big for you, reduce 24px.

If you want to see what my site looks like with that (and other) modification(s):

http://www.filterjoe.com
thesacredpath · Member · Dec 12, 2015 at 4:40 am
Copy link
Andrew, did the code that @filterjoetest gave work for you? I’m not seeing any custom CSS on your site right now. If this is still an issue, let me know.
andrewhallnz · Member · Dec 13, 2015 at 1:07 am
Copy link
Hi @filterjoetest and @thesacredpath, thanks ever so much for your input! Very grateful.

I can’t show you the effect of your suggestions because while I have a premium account for my main site, this is my test site which I cannot afford to pay premium for as well.

What filterjoetest has suggested is the same as the middle part of the code I put in my original post, and mostly that whole segment works – it does swap the image and menu and it does contract the white-space a lot. BUT, there seems to be something in that header area that I cannot contract, so that while the position of the white-space moves around, I cannot get rid of as much as I want. If you use the inspector function between the image and the menu (with no CSS changes), on Chrome there is a blue box and a larger green box. The inspector does not seem to be able to differentiate between these and it seems to involve header#masthead.site-header.

Also, as in the original question, the first two CSS statements do swap the image and menu but it seems positioning is not stable for different screen widths even with widths greater than 1000 pixels.

I think this is a worthy task – to restructure Twenty Sixteen in this way – but having looked at the theme more closely, I am less and less fond of it. Most of the visitors to my site will be on tablets or larger and for me it doesn’t work in either of those formats. The menus are too large, the horizontal menu presentation is less effective than vertical, I don;t like the way the menus present on tablets … I could go on. For the time being I think I will see if I can get twenty ten, which I like, to work better on smaller screens – for which I will start another thread.
andrewhallnz · Member · Dec 13, 2015 at 1:09 am
Copy link
where I say horizontal menu presentation I meant main submenus.
thesacredpath · Member · Dec 14, 2015 at 7:11 am
Copy link
Hi, it seems you have switched the site you referenced to Twenty Ten. Are you going to stay with this theme?
andrewhallnz · Member · Dec 14, 2015 at 9:20 am
Copy link
The test site I referenced is actually https://sufiordernzw.wordpress.com/ while my main site remains twenty ten.

Yes, as my previous post says, I have decided that there are too many things I do not like about Twenty Sixteen. Thank you and filterjoetest for your help however, I have learned from it.

Andrew
thesacredpath · Member · Dec 14, 2015 at 7:07 pm
Copy link
You are welcome, Andrew, and if you have further questions, please let us know.

No items found.