• Resolved maxtaylor

    (@maxtaylor)


    Hi Guys

    We are trying to create a blog page that has a different header to the rest of the site.

    I have identified the element as .nav.navbar-nav and note that the following code removes the element from all pages:

    nav.navbar-nav { display: none !important; }

    Is there a way to apply the above code only to the blog page?

    Thanks

Viewing 12 replies - 1 through 12 (of 12 total)
  • Hi Max, It can be achieved if you know the page ID for blog page. Suppose it is 789, then the correct CSS would be

    .page-id-789 nav.navbar-nav {
    display: none !important;
    }

    You can add above CSS using Advanced CSS Editor plugin. Hope it helps.

    Thread Starter maxtaylor

    (@maxtaylor)

    Hi Suyogya

    Thanks for the quick reply

    Page id is 42.

    Cheers

    Hi Max,

    Well, that was quick. Following code should do the trick:

    .page-id-42 nav.navbar-nav {
    display: none !important;
    }

    Let us know how it goes ??

    Thread Starter maxtaylor

    (@maxtaylor)

    Thanks again for the quick reply.

    Unfortunately that still hasn’t worked.

    I’m entering this into the section customising>sparkling options>other

    When i add the code without the page id reference, it works but the nav is removed from all pages. When adding .page-id-42 the nav does not disappear from any page.

    I’d seen similar posts and tried to replicate but haven’t had any success so far.

    Hi Max,

    Can you please post a link to your site? Thanks!

    Hi Max,

    Can you post a link to your site? Thanks!

    Thread Starter maxtaylor

    (@maxtaylor)

    Hi Suyogya

    Apologies for the delay – didn’t see this until now.

    Here is the link:

    https://quipmo.com/blog/

    Ultimately we would like to add a header image that spans the width of the page with the nav menu hidden, so if you have any suggestions on how to achieve that would also be most welcome (:

    Cheers

    Hi there,

    Are you sure the page ID is 42? Can you please check it again for me, by following this tutorial. Let’s achieve this first and then we’ll figure something out for header image too ??

    Thread Starter maxtaylor

    (@maxtaylor)

    Hi Suyogya

    Here is the url for when I checked the page id:

    https://quipmo.com/wp-admin/post.php?post=42&action=edit

    Assume that confirms it is 42?

    Cheers

    Hi @maxtaylor,

    I hope you are well today and thank you for your question.

    You can try achieving this by adding the following CSS code in the Custom CSS option of the latest version of Sparkling theme on the below path.

    Admin Area -> Appearance -> Customize -> Sparkling Options -> Other -> Custom CSS

    body.blog .nav.navbar-nav {
        display: none;
    }

    Best Regards,
    Movin

    Thread Starter maxtaylor

    (@maxtaylor)

    Thank you Movin! That worked perfectly.

    Suyogya and Movin I cannot thank you enough for your time.

    Your service is top notch!

    Cheers

    Max

    You are always welcome here ??

Viewing 12 replies - 1 through 12 (of 12 total)
  • The topic ‘Remove header nav from blog page’ is closed to new replies.