Navigation menu position | Categories error

danahderani · Member · Jan 29, 2017 at 3:38 am
Copy link

Add topic to favorites
Hi,

I’d like a Custom CSS code to make my navigation menu centered underneath my header image. Right now, it looks to be off center.

As for my Categories, when I go to Customization – Content Options – Post Details, I have ‘Categories’ checked but they don’t appear. Do they only show up upon viewing each post individually versus on the front page of my blog? I’d like to be able to see them both ways, and have them be either alongside ‘Date / Comment’ of each post (reference image: http://i.imgur.com/hsmeSsC.png) or centered underneath my social sharing icons below each post (reference image: http://i.imgur.com/r85wgnq.png).

Thank you!

The blog I need help with is: (visible only to logged in users)
kathrynwp · Staff · Jan 30, 2017 at 7:45 pm
Copy link
I’d like a Custom CSS code to make my navigation menu centered underneath my header image. Right now, it looks to be off center.

Give this a try:
```
.main-navigation ul {
    text-align: center;
}
.main-navigation li {
    display: inline-block;
    float: none;
}
```
As for my Categories, when I go to Customization – Content Options – Post Details, I have ‘Categories’ checked but they don’t appear. Do they only show up upon viewing each post individually versus on the front page of my blog? I’d like to be able to see them both ways,

Hemingway Rewritten doesn’t display categories on the blog page, only on single posts. Content Options can only display elements that are supported in the theme by default, so in this case it’s not possible to display categories on the blog.
danahderani · Member · Jan 30, 2017 at 7:50 pm
Copy link
Thank you so much – that worked!

If I wanted to change the navigation menu’s text size, is that possible/is there a code for that?

Also, I can’t tell if it’s because of my header image or not, but can I move my navigation menu a little up, so it lays right underneath my header? There seems to be a lot of space between the header image and the menu itself (I did have to add white space to the top and bottom of my header because it was being cut off otherwise and I wasn’t sure of a way around this).
kathrynwp · Staff · Jan 30, 2017 at 9:33 pm
Copy link
If I wanted to change the navigation menu's text size, is that possible/is there a code for that?

That would be:
```
.main-navigation a {
  font-size: 18px;
}
```
Also, I can’t tell if it’s because of my header image or not, but can I move my navigation menu a little up, so it lays right underneath my header? There seems to be a lot of space between the header image and the menu itself (I did have to add white space to the top and bottom of my header because it was being cut off otherwise and I wasn’t sure of a way around this).

You can use a negative margin for that:
```
.main-navigation {
   margin-top: -30px; 
}
```
Adjust the value as you like and test to be sure it still looks as expected on smaller screens.

If you want, you can add a media query to restrict the change to particular screen sizes.

You can learn more about using media queries that target certain screen sizes here:

http://en.support.wordpress.com/custom-design/custom-css-media-queries/

Media Queries for Standard Devices

Responsive Design with CSS3 Media Queries
danahderani · Member · Jan 30, 2017 at 10:08 pm
Copy link
Great! Those both worked (:

A couple of final questions while I have you here if that’s ok!

1. How can I eliminate the spacing underneath where it reads “Continue Reading ->” and the line that separates each post? Reference pic: http://i.imgur.com/dFZE0ZG.png

2. How can I increase the spacing between my main content/posts and my right sidebar? They just seem too close together right now, so I’d like the sidebar to be moved over to the right a little bit if possible.

Thanks again!
kathrynwp · Staff · Jan 31, 2017 at 2:15 pm
Copy link
This should remove the line and space below each post:
```
.hentry {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}
```
You could use this to reduce the width of the main column on screen sizes that display the two-column layout:
```
@media screen and (min-width: 800px) {
  .content-area {
    width: 90%;
  }
}
```
Let me know how that goes.

If you need help with anything new, please start a new thread in the CSS forum. Thank you!
danahderani · Member · Jan 31, 2017 at 4:43 pm
Copy link
Thanks Kathryn! That first code worked.

The second one just seemed to shrink the size of my posts/main content, rather than increasing the space between the posts and the sidebar, thus making it so the sidebar is moved over to the right more.

Is this possible? I hope I’m making sense. Please let me know if I need to be more clear or provide reference pics!
kathrynwp · Staff · Jan 31, 2017 at 5:40 pm
Copy link
The second one just seemed to shrink the size of my posts/main content, rather than increasing the space between the posts and the sidebar, thus making it so the sidebar is moved over to the right more.

Right, that’s what it does.

I wouldn’t suggest widening the entire content column (left and right columns) by just making the gutter (space between columns) wider, as this will cause horizontal scrolling on some screens.

That said, if you put the wider content width in a media query to affect only larger screens, it might work. Something like this:
```
@media screen and (min-width: 1250px) {
  .site-content {
    width: 1200px;
  }
}
```

No items found.