Adjust header image and nav bar menu to the center of individual post page
-
Can someone help me with the css to adjust my header image and top nav bar? I adjusted the width of my single post pages, but my header and nav bar don’t reflect the adjusted width so they are justified left and aren’t the same width as the overall page.
I’d like to:
1) Center the top nav bar on all individual post pages
2) Center the header image on all individual post pages
3) If possible, I’d like to widen the header image overall – so that its overall width is the same as the overall width of a single post page.Thanks for any help!
The blog I need help with is: (visible only to logged in users)
-
Hi Jen!
Try adding this to your CSS:
.single .container, .page .container {
width: 960px;
}Please let me know if that works.
-
ah, on second thought, that only addressed part of your issue. (getting the header image and nav bar centered)
Gimme a minute to try and address your number 3.
-
Jen, I cannot figure out how to address your number 3 with CSS. I believe it would be easier to do it by editing the PHP, which unfortunately is not possible with a WordPress.com account.
My first post should at least address 1 and 2. Hopefully a Happiness Engineer can help you were I have been unable.
Best of luck
-
Thanks highprrr.
I added the code above, but doing so pushed my right sidebar widget completely off the page so I had to remove it. After removing the code, the right sidebar came back, the header image remained centered (?), but now, unfortunately, the small vertical dotted divider line that is meant to divide the post container from the widget container (right sidebar) has now shifted to the left and is within my post. I can’t seem to move it back to the right…or getting rid of it all together would be an option.
Any help there?
And I’d still appreciate any help in widening my overall header image if that’s possible.
Thanks so much.
-
Sorry, didn’t notice that.
Add this to put things back the way they were and I’ll take another look when I get off work.
.single .container, .page .container {
width: 1160px;
} -
Thanks so much for your continued help.
I added the code above, but it didn’t shift the vertical dotted divider line.
-
-
-
Ok.
Delete the part I originally had you add, and any other stuff you added trying to change your header image. Save the custom CSS.
Then copy anything else you’ve put in your custom CSS not related to this header issue, and paste it somewhere safe like notepad or something.
Delete everything in your custom CSS now that you have it backed up in notepad. Save the custom CSS.
See if the dotted line goes back to where it belongs
-
Ok….I copied all my other custom CSS, saved it elsewhere, and deleted it from my blog and saved.
The line did move back, but of course, that’s because now my overall post page and container width went back to its original setting of 960px. I had adjusted the width on post pages to 1160px.
-
Ok. One thing you can try while I’m slaving away at my horrible factory job is open your site in chrome, right click on the page and click inspect element.
This allows you to mess with the CSS and see what the changes would look like.
If you get it to work, copy and paste what you did to your custom CSS.
Hopefully a happiness engineer can jump in and figure this out while I’m at work. I messed around with it a lot yesterday and I’m not sure I’ll be able to figure it out.
I’m still pretty sure the php needs to be edited
-
Alright….fixed all my css so that I’m back to the wider containers, the vertical line is shifted back to the right, AND the header image is centered…so all’s well there! Thank you jameswelbes.
All I need now is for a happiness engineer to possibly help me stretch the overall width of my header image. :)
-
just FYI, your nav bar on your main page looks fine, but when I go to a post, it’s aligned to the left.
Is this because of something you did in your custom CSS? I can’t imagine the theme would be like that by default.
-
just FYI, your nav bar on your main page looks fine, but when I go to a post, it’s aligned to the left.
Is this because of something you did in your custom CSS? I can’t imagine the theme would be like that by default.
Sadly, that’s the theme default and it looks more pronounced since I adjusted the overall post page width. I don’t think there is anything I can do with the navbar’s alignment using css, but if I *could* center it I’d like to.
My fear and suspicion is that I may be stuck with the header width and the nav bar alignment as a result of the theme and because I’m .com user (instead of using wordpress.org).
-
-
I really like how that centered my nav bar!!!!! MUCH better there! I so appreciate that! I love how everything is aligned now!!!
I do wish the content width could be stretched again…along with the header image to match. I don’t like the small content width box. Any ideas at all there?
-
3) If possible, I’d like to widen the header image overall – so that its overall width is the same as the overall width of a single post page.
I just checked a single post page on your site, http://wildflowersandmarbles.com/2015/08/31/the-morning-basket-plans-printables-2015/ , and the header image appears the same width as the content area. If you can point me to a location where this is happening, I would be more than happy to have a look at it for you.
- The topic ‘Adjust header image and nav bar menu to the center of individual post page’ is closed to new replies.
WordPress.com Forums 