Archived topic

Targeting A Specific Page with CSS

3 replies · Started by Tim on February 10, 2017

Viewing posts 1–4 of 4

February 10, 2017 at 6:52 pm #277232

Hello,

I have a top bar fix position at top=0 which I show on all pages and posts, it is 25px height, so
I added

.nav-aligned-right.nav-above-header .main-navigation {
        margin-top: 25px;
}

to push my Menu 25px downward

I need to remove the top bar from a page with ID = 38663, haveing done so I now need to remove the 25px so the Menu sits at the top of my site on this page

I am trying

.page-id-38663 .nav-aligned-right.nav-above-header .main-navigation { 
    margin-top: 0 !important; 
}

This is not working, you can see here:
http://aaa.greaterthanthesum.com/sumapp/

Any help on this is appreciated
Thanks

February 10, 2017 at 7:02 pm #277233

Hi Tim,

I see this code being added:

.nav-aligned-right.nav-above-header .main-navigation {
        margin-top: 25px;
}

but not this one:

.page-id-38663 .nav-aligned-right.nav-above-header .main-navigation { 
    margin-top: 0 !important; 
}

Otherwise that should work. Try adding that on the top of your CSS editor?

February 10, 2017 at 7:25 pm #277234

Hey Leo, I tried adding it at the top and the bottom of the editor, no luck in either case

I did get it to work with

.page-id-38663 #site-navigation { 
    margin-top: 0 !important; 
}

unless you tell me this is a bad way to do this, I guess it is working

Thanks

February 10, 2017 at 7:34 pm #277238

Nope nothing wrong with that!

This archived topic is closed to new replies.

Start building better websites today.