Space in Main Navigation Menu

This topic has 5 replies, 2 voices, and was last updated 9 years, 3 months ago by Sakin.

Viewing 6 posts - 1 through 6 (of 6 total)

Author

Posts
August 8, 2015 at 3:21 am #62360
Kim
Participant
Hi Sakin!

I haven’t bothered you in a while. Have you missed me?

1) So, I’m using the following CSS in order to add space between the Top Nav menu headings but I’m not getting it to respond.
```
@media screen and (min-width: 940px) {
    #header-menu ul.menu a, #footer-menu ul.menu a {
        padding-left: 20px;
        padding-right: 20px;
    }
}
```
ex. FACE BODY SKIN HAIR PRODUCTS FITNESS MUSINGS
I would like them to be more spread out, have more space between them.

I’ve tried to adjust the px but nothing.

2) When using Google Chrome and you put your mouseover the main nav menu headings and the dropdown shows up there is a strange transparency between the categories. It’s fine in firefox and IE.

Check it out and you will see immediately what I mean.

https://beautyblackbook.com/wp-content/uploads/dropdown-transparency.jpg

3) How can I add a bullet point before the dropdown menu items. Categories, subcategories, posts, etc.

Thanks!
Kim
beautyblackbook.com (or hidemyage.com)
August 9, 2015 at 9:05 pm #62448
Sakin
Keymaster
@Kim: Welcome back to forum
1. that 20px is default space. Increase that to 30 and then you will see the changes.

2. It’s because of the padding you have added in your child theme style.css. You can go to that css and remove it.
```
@media screen and (max-width: 1280px) {
    .site #header-menu ul.menu a, 
    .site #footer-menu ul.menu a {
        padding: 0 10px;
    }
}

@media screen and (max-width: 1100px) {
    .site #header-menu ul.menu a, 
    .site #footer-menu ul.menu a {
        padding: 0 8px;
    }
}

@media screen and (max-width: 1000px) {	
    .site #header-menu ul.menu a, 
    .site #footer-menu ul.menu a {
        font-size: 13px;
    }
}
```
3. I don’t get it what you mean.
August 10, 2015 at 10:24 pm #62690

Kim
Participant

Thank you!! Your are awesome!
Forget about #3. It looks amazing now. 🙂

Mobile Menu Question:

On mobile devices, when you click on the main nav menu dropdown, not only do the categories come up but also the long list of posts. How can I make it so that only the first tier of categories show….ex.

If you Click on the menu now you get:
Face:
Eyes-
Beautyblackbook giveaway winner for under eye dermal fillers
Stroma Make My Brown Eyes Blue…
Antiagion eyes (part 111)…
Lower blepharoplasty: Greek for please take my bags
etc
etc
Jawline –
Atx 101
Guide to dermal fillers…
Botox for jowls…
Genioplasty vs chin augmentation for a strong jawline
Neck –
……..
……..

I would like it to show up like this:

Face:
Eyes
Jawline
Neck
etc

So that only the first tier shows?

K

August 12, 2015 at 12:57 am #62853

Sakin
Keymaster

@Kim: For that, just add the following css in “Appearance => Theme Options => Custom CSS” box:
.sidr ul li ul { display: none; }

August 12, 2015 at 5:10 am #62870

Kim
Participant

Actually, I want it to show to the second level. I didn’t count the main nav as level 1. So, now it’s showing :
FACE
BODY
SKIN
HAIR
PRODUCTS
FITNESS
MUSINGS

But I would like it to show:
FACE
Eyes
Jawline
Neck
Injectables
Choosing a Doctor
BODY
Upper Body
Lower Body

etc.

You know what I mean?

2) Also, I added the following CSS but I’m still getting an inordinate amount of space above my post on the post page:

.blog #content .hentry,
.archive #content .hentry {
margin-bottom: 0;
padding-bottom: 0;
}

Ex. of page: https://beautyblackbook.com/tape-in-hair-extensions/

3) My content is showing up with exta space between the lines of content on mobile devices. Instead of 1 space between lines it looks more like 1 1/2 or 2. This is something relatively new. I’m not sure what I did to change it. Can you take a look?

Thanks!
Kim

August 12, 2015 at 8:27 am #62879
Sakin
Keymaster
@Kim:
1. Ok then replace the css .sidr ul li ul { display: none; } with the css .sidr ul.sub-menu ul { display: none; }

2. I am bit confused as you have said post on the post page. But the link you have posted in just a post. There is post navigation above your post title. That is taking space.

3. It’s because of the custom css you have added in
```
body, input, textarea {
    font-size: 20px;
    line-height: 1.99em;
}
```
Author

Posts