Changing the position and style of the menu of Twenty Sixteen theme
-
Hi Is it possible to do any of the following on the Twenty Sixteen theme menu, in decreasing order of importance:
1 To move the menu below the header/banner image
2 To reduce the gap between menu and header/banner image
3 To remove the thin white border to submenu dropdown items (this border does not appear on the main menu items) Alternatively, can this menu border’s colour be changed (in order to match the main menu item colour, and thus make it disappear)
All this probably involves CSS changes, and any help would be appreciated. Many thanks, RobThe blog I need help with is: (visible only to logged in users)
-
To remove the gap try this
@media screen and (min-width: 61.5625em) .header-image { margin-top: 0px; }To remove the white border try this
.main-navigation li { border: 0px !important; }As far as moving the nav below the image that would take a lot more work and you would probably be better off just finding a theme that has that layout already in it.
-
Hi
Thank you for this advice. The gap issue didn’t seem to be resolved, but the white border was removed, and it looks much better, thank you.
I would be happy to do some work on the issue of the menu placement, if you knew a source website that could give advice on this. The website would look significantly better with the banner image adjacent to the website title, without the menu inbetween.
But, as you say, I could use another theme. I’d prefer to use one of the default themes as these are not likely to be ‘retired’ anytime soon – and they are are used by some many people that development/debugging is more likely. I will try out the TwentyFifteen and TwentySeventeen themes.
Many thanks again, Rob -
try this for the gap.
.header-image { margin-top: 0px !important; }Good luck on moving the menu. I don’t think you could do it with just css though. Usually I would be editing the php but you can not do that unless you are hosting your own site. Most themes that you find will be supported for while.
-
Thank you again for this CSS code, this is appreciated.
I will see whether I can find a them like 2010 with the banner close to (or under ) the website title, but which is responsive. Failing that I’ll continue with 2016, and use your code for the CSS. Many thanks again
Rob -
Premium themes usually offer more control as well, you might want to look at a few of those
-
Hi Thank you for this advice – I have the Premium option, so will look at some of these Premium themes. Today, though, I thought I’d try the default TwentySeventeen theme. I haven’t tried it before, because it seemed at first sight to be primarily a business layout, but after testing it seems to be exactly what I’m looking for, with just a few minor customisations that I’ll explore. Many thanks again. Rob
-
Hi @journeyingthroughthebible, I see you have switched to Twenty Seventeen. If you have questions on customizing that theme, you can start a new thread and we would be happy to help with that.
-
Hi thesacredpath
Many thanks for your reply and offer of help, I really appreciate this. I have been in discussion with supernovia about whether it’s possible on TwentySeventeen, to reduce the size of the header on the home page (the header on other pages looks great). I know this large header is one of the key features of TwentySeventeen, nonethless if this header could be reduced on mobile view so that it matches the headers on the other pages, that would be a real bonus (given so many view on mobiles) – and I have a feeling this is something that other users might like to have. I also notice that the header on the other pages is not only smaller, but it shows a greater amount of the original image I uploaded, so it seems to be better proportioned, as well as smaller. Would it be at all possible to match the header on the home page to the smaller, well-proportioned one on the other pages?
[I have also created some CSS (with help) to change the colours of the menu and font size and style of the title and tagline, too, and if you look at my other threads, you will see the CSS used, if that is of any interest for other users.] With many thanks, Rob -
Hi thesacredpath
In addition to reducing the size of the header on a full computer screen, is it possible to enlarge the text size of the site title but at the same time, *not* enlarging on the mobile (it is fine as it is on the mobile view). (Just to mention that I have set the width of the site title so it breaks at the right point.)
Many thanks, Rob -
Hi thesacredpath
I have found the answer to the above issue about the site title text size, courtesy of information on a site http://www.karavadra.net:
The CSS code I use is this:
/*site title colour and font*/
.site-title, .site-title a {
font-family: “Open Sans”;
color: #001c50 !important;
font-weight: 900 !important;
font-size: 17px;
}
/*site title colour and font for computer screens */
@media screen and (min-width: 48em) {
.site-title, .site-title a {
font-family: “Open Sans”;
color: #001c50 !important;
font-weight: 900 !important;
font-size: 34px;
}
}
This sets the default to the smaller size suitable for mobiles, but sets the larger size specifically for computer screens. It works well. So it’s just the issue of the home page header that I’m looking for help on here.
Many thanks, Rob -
Also, just to add that it’s particularly the home page header in mobile view that is the problem. Currently, it takes up pretty much the whole of the screen, and if it could be shrunk to (say) half or athird of the screen, I think it would look a lot better. Many thanks.
-
Also, just to add that it’s particularly the home page header in mobile view that is the problem. Currently, it takes up pretty much the whole of the screen, and if it could be shrunk to (say) half or athird of the screen, I think it would look a lot better. Many thanks.
-
See my response in this other thread on the header image size adjustment for the main page: https://en.forums.wordpress.com/topic/twenty-seventeen-website-title-sub-title-menu-colour-customisation?replies=11.
- The topic ‘Changing the position and style of the menu of Twenty Sixteen theme’ is closed to new replies.
WordPress.com Forums 