Hey there,
The menu width is set by it’s container which is 980px, you’d have to take it out of its natural order with position absolute:
#main-navigation{
margin-top:65px;
position:absolute;
left:0;
right:0;
}
.site-main {
padding: 60px 0;
}
The first part deals with the navigation, you need some margin to make it fall below the header. Also need some extra padding for the main body content.
You’ll need something for the responsive part of the theme, you could give this a go:
@media screen and (max-width: 960px) {
#main-navigation{top:20px;}
}
Hope this helps 🙂
Rather than make them larger, how do I center the menu and the title?
I assume I have to remove the header widget area?
So you no longer want the menu links to take up the entire page?
If not then ditch the previous CSS I did.
And If you only wish to centre the site title and menu:
.site-branding, .sf-menu ul {
float:none;
display: table;
margin:auto;
}
Note sure what widget area you refer too, I don’t use the theme myself. This CSS should centre for you. 🙂
Take care.
Hey there,
Not sure what dots you refer to, but I think by lines you mean the seperators in the nav?
If that’s the case then it’s current set through content so you could do this:
#main-navigation .sf-menu > ul > li:after {
content: none;
}
Take care.
Having issue with responsive part of my site. The menu automatically opens on mobile/tablet display.
I don;t know where to implement this code: @media screen and (max-width: 960px) {
#main-navigation{top:20px;}
}
See here: http://practicallyviral.com/grandpa-receives-puppy-after-losing-wife-of-63-years-his-reaction-will-bring-tears-to-your-eyes/
Here is the code:
[ Massive amount of code moderated, a link to the download or pastebin.com would be better. https://wordpress.org/themes/hiero ]
Hey there,
Back up in here:
https://wordpress.org/support/topic/hiero-wordpress-theme?replies=7#post-5880550
You said:
Rather than make them larger, how do I center the menu and the title?
And Tim went on to comment that if you no longer needed the menu to take on the entire page then ignore the previous CSS as that all revolved around repositioning the menu to do as you originally requested.
If you do need to now make it fill the page then let us know.
Thanks so much for your help!
I have figured it out. the only issue I am having is that the individual posts on mobile are not responsive?
Please see: http://practicallyviral.com/grandpa-receives-puppy-after-losing-wife-of-63-years-his-reaction-will-bring-tears-to-your-eyes/
Again,
Thanks so much for your help!
Hello! I can help with this.
It looks like the reason your posts aren’t being responsive is because that div has a right margin set, as you can see below:
.site-content {
margin: 0 340px 0 0;
}
What we’re going to need to do is change that from using the margin to decide where the post ends, we’re going to tell it how much of the main content area we want it to take up. This may take just a little tweaking to get the number just right, but try this code below to replace the code above:
.site-content {
width: 66%;
}
Hope this helps!
Hey there,
Thanks so much for your help!
I tried updating the code per your idea and it didn’t seem to work ;/
Any other ideas why it isn’t responding?
No problem! Are you running a caching program, by chance? If so, go ahead and clear your site cache and see if the changes take effect. If not, there may be another div we can track down.
Awesome!
Cleared my cache and it still is the same.
I think it could be a problem here:
@media screen and (max-width: 960px) {
.container {
width: 90%;
}
I bet you’re right, good sleuthing! Change that 90% to match the number in the code I gave you and I bet you’ll be golden.
I’ll check in again in just a bit to make sure, but that should do it.
