Navigation Bar CSS Help

vlogazul · Member · Nov 19, 2013 at 10:52 am
Copy link

Add topic to favorites
Hello..
I am currently using the Forever theme. Am wondering if there’s a snippet to make the header image and the navigation bar be really close to each other. As you can see, there’s some white space that separates the header with the navigation bar. So I would like for that to be closer to each other. I will appreciate any help!

The blog I need help with is: (visible only to logged in users)
thesacredpath · Member · Nov 19, 2013 at 8:59 pm
Copy link
Hi there, try the following which will give virtually the same gap as below the menu. You can of course play with the value as desired.
```
#access {
    margin-top: -0.35em;
}
```
vlogazul · Member · Nov 20, 2013 at 12:34 am
Copy link
It worked perfectly. Thanks!
Now two more things if I can get the help.
When you go to the blog, on the bottom of the page there a link that says “Noticias Anteriores” I would like to know is there’s a snippet to reduce the white space from below and under that text.

Also, when you click on that “Noticias Anteriores” link it will take you to the oldest post and pages. As you can see on top and bottom left and right of the page there’s links that say “Noticias Anteriores” and “Noticias Recientes” is there any way you can erase those links that are I the too and just leave the ones on the bottom? Thanks
thesacredpath · Member · Nov 20, 2013 at 9:41 pm
Copy link
For the space below, add this and then adjust the bottom margin 1.5em value as desired. For the space above, since the spacing is actually the bottom post spacing (all posts on main page) we will use a negative top margin. Adjust that number top margin number as desired.
```
#content nav {
    margin-bottom: 1.5em;
    margin-top: -1.5em;
}
```
thesacredpath · Member · Nov 20, 2013 at 9:44 pm
Copy link
To get rid of the previous and next navigation at the top of the subsequent post pages, add the following.
```
.paged #nav-above {
display: none;
}
```
vlogazul · Member · Nov 21, 2013 at 5:44 am
Copy link
It works perfect, thanks and awesome job!
Now two quick things.
When you click on a category in the navigation bar for instance the Noticias link, it takes you to its page, so on the top of the page there a text that says “Archivo de la categoría: Noticias” is there a snippet to erase that text from that page and the other navigation pages?

Also, is there a way or a snippet to have social network icons on my navigation bar?
thesacredpath · Member · Nov 21, 2013 at 4:21 pm
Copy link
You are welcome. To get rid of the page title on archives, category and tags pages, add the following.
```
.archive .page-title {
    display: none;
}
```
Your navigation bar is pretty full, and things can be adjusted, but you might want to try the following which puts the social icons you had in the bottom center to the right of your header image.
```
#page {
    position: relative;
}
#text-6 {
    position: absolute;
    right: 50px;
    top: 80px;
}
#text-6 .widget-title {
    border: none;
    display: none;
}
```
vlogazul · Member · Nov 21, 2013 at 8:22 pm
Copy link
Sweet, awesome job!

Last thing, can you create a snippet to make the widgets on my footer be centered? Thanks
thesacredpath · Member · Nov 21, 2013 at 9:26 pm
Copy link
Certainly. Since we put the text widget, which was in the second footer widget area in the top, I would suggest not putting any other widgets in that position if you use the following solution since we are effectively doing away with that position.
```
#supplementary.four .widget-area {
    width: 30%;
}
```
vlogazul · Member · Nov 23, 2013 at 6:48 am
Copy link
Thank you very much. You have done an amazing job!

Is there a snippet to make the “Noticias Anteriores” text on the bottom main page be bold? As well when you click on it, there will be “Noticias Anteriores” and “Noticias Recientes” on the bottom be bold as well?
thesacredpath · Member · Nov 23, 2013 at 7:12 am
Copy link
You are welcome, and there certainly is. Add this to turn the previous and next links at the bottom bold.
```
.nav-previous a, .nav-next a {
    font-weight: bold;
}
```
vlogazul · Member · Nov 26, 2013 at 9:13 am
Copy link
Sweet, works perfect!

Sorry to bother but is there a snippet to make the caption of the pics on my posts bold? When you click in a post, below the picture of that post there’s a caption. Can you make that bold? Thanks
justpi · Member · Nov 26, 2013 at 12:18 pm
Copy link
You have added this:
```
.wp-caption-text {
font-style: normal;
}
```
Turn it to:
```
.wp-caption-text {
font-style: normal;
font-weight: bold;
}
```
Your last few questions have nothing to do with the title of the thread. In the future please start new threads for new questions (to help other users looking for the same answers).
vlogazul · Member · Nov 26, 2013 at 5:35 pm
Copy link
Will do, thank you very much for the help!
justpi · Member · Nov 27, 2013 at 6:06 am
Copy link
You’re welcome.

No items found.