1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Easy way to remove navigation and logo for landing page?

Discussion in 'WordPress' started by SEO4hire, Nov 19, 2013.

  1. #1
    Hello all. I am trying to remove the navigation and logo (basically the header) for this one page on my site so I can move the content above the fold and also cut down on distractions and opportunities to leave the page. I have searched Google for a possible plugin for this or other solution, but so for have come up empty. Is there an easy way to do this? I am very limited in my knowledge of CSS and php, so the easier, the better.
    SEMrush
     
    SEO4hire, Nov 19, 2013 IP
    SEMrush
  2. themes4all

    themes4all Well-Known Member

    Messages:
    662
    Likes Received:
    47
    Best Answers:
    6
    Trophy Points:
    100
    #2
    you can hide the menu by using the CSS and the page ID, Add this Code on your CSS Style :

    
    .page-id-NUMBER #navigation {
    display: none;
    }
    
    Code (markup):
    Where Number is the PAGE ID, Just open your pages move the mouse over the page you want to hide the navigation menu and look on the Bottom Status Bar.. that will give you the page id number.

    You can do the same for the Logo...

    Goodluck
     
    themes4all, Nov 19, 2013 IP
    oakley56fila likes this.
  3. SEO4hire

    SEO4hire Active Member

    Messages:
    976
    Likes Received:
    7
    Best Answers:
    0
    Trophy Points:
    80
    #3
    Thanks so much for the suggestion. I added it, but it did not do anything. Do I need to put it in a specific place for it to work?
     
    SEO4hire, Nov 19, 2013 IP
  4. themes4all

    themes4all Well-Known Member

    Messages:
    662
    Likes Received:
    47
    Best Answers:
    6
    Trophy Points:
    100
    #4
    You have to put it on your Theme CSS Style ! i think is the best place... don't forget to add the Page ID...
     
    themes4all, Nov 19, 2013 IP
  5. SEO4hire

    SEO4hire Active Member

    Messages:
    976
    Likes Received:
    7
    Best Answers:
    0
    Trophy Points:
    80
    #5
    I added it to my style.css file, but it did nothing. Not sure if I need to put it in a specific place in the file or just at the bottom, but when I added it to the bottom nothing changed.
     
    SEO4hire, Nov 19, 2013 IP
  6. bob25

    bob25 Well-Known Member

    Messages:
    1,519
    Likes Received:
    12
    Best Answers:
    0
    Trophy Points:
    128
    #6
    Does it have to be a Wordpress post/page (.php)?

    If not, just create an HTML page with a link back to the navigation links in WP.
     
    bob25, Nov 19, 2013 IP
  7. SEO4hire

    SEO4hire Active Member

    Messages:
    976
    Likes Received:
    7
    Best Answers:
    0
    Trophy Points:
    80
    #7
    It doesn't have to be WP, but I have already created the page, and was hoping that there was an easy way to hide the nav and logo so the content can move above the fold.
     
    SEO4hire, Nov 19, 2013 IP
  8. oakley56fila

    oakley56fila Active Member

    Messages:
    130
    Likes Received:
    4
    Best Answers:
    0
    Trophy Points:
    58
    #8
    The issue here is that you want to hide the logo and header, but only on this page. WordPress is template driven, so the majority of the settings which would control this also impact the other pages within the site. For instance, if you were to add this code to your style.css file:
    #top-container-inner {
      display: none;
    }
    Code (markup):
    The top section, which includes the logo and the navigation will disappear, and the rest of the pages content will move up. The problem with this approach is that all other pages will be missing their navigation / logo, crippling your website.

    Don't fret, there is a solution. You can either edit your website's theme by adding this:
    <?php body_class($class); ?>
    Code (markup):
    Inside your body element so that it looks like this:
    <body <?php body_class($class); ?>>
    Code (markup):
    This will output the unique page id as a CSS class on each page / post's body element. This will allow you to target the specific with CSS. After you do this, you should be able to try the code:
    .page-id-{ID} #top-container-inner {
      display: none;
    }
    Code (markup):
    to your style.css file. (Replace {ID} in the example above with that specific page's ID numerals.)
    That should accomplish what you're after. If the code doesn't work, I just would need to look at the page once you've added the code to the body element and I'll write up a quick bit of working CSS for you to add.

    Also, off topic a bit here, but you should really consider changing the slug on this page here: http://proactivewebmarketing.com/uncategorized/hello-world/. It looks like you modified the stock post that comes as a default with each WordPress installation in order to create this post. Oh, you should also create a category and put this post into it.
     
    oakley56fila, Nov 19, 2013 IP
    SEO4hire likes this.
  9. SEO4hire

    SEO4hire Active Member

    Messages:
    976
    Likes Received:
    7
    Best Answers:
    0
    Trophy Points:
    80
    #9
    Thanks so much for the help. I get a lot of what you are saying, but you lost me when you referred to the body element. Where is that located? I do not see it in the style.css, so I am assuming it is elsewhere?
     
    SEO4hire, Nov 19, 2013 IP
  10. oakley56fila

    oakley56fila Active Member

    Messages:
    130
    Likes Received:
    4
    Best Answers:
    0
    Trophy Points:
    58
    #10
    It will be in one of the template files. I'm thinking single.php. It can be different for each theme. Check single.php and index.php first. It looks like you're using a theme called vulcan.. is that one available for free? If so I could grab it and find what you need to change.
     
    oakley56fila, Nov 20, 2013 IP
  11. SEO4hire

    SEO4hire Active Member

    Messages:
    976
    Likes Received:
    7
    Best Answers:
    0
    Trophy Points:
    80
    #11
    Cool - I will check it out in the morning and see if I can find it. I will report back either way. Unfortunately it was not free. Bought it from Themeforest.
     
    SEO4hire, Nov 20, 2013 IP
  12. SEO4hire

    SEO4hire Active Member

    Messages:
    976
    Likes Received:
    7
    Best Answers:
    0
    Trophy Points:
    80
    #12
    Well...I looked in single.php, index.php and a couple of others, and could not find any code that started with <body. Let me know if you have any other ideas, or if you are open to taking a look if I give you access.
     
    SEO4hire, Nov 20, 2013 IP
  13. oakley56fila

    oakley56fila Active Member

    Messages:
    130
    Likes Received:
    4
    Best Answers:
    0
    Trophy Points:
    58
    #13
    Just PMed you regarding this.
     
    oakley56fila, Nov 20, 2013 IP
  14. oakley56fila

    oakley56fila Active Member

    Messages:
    130
    Likes Received:
    4
    Best Answers:
    0
    Trophy Points:
    58
    #14
    There you go. I've added that code to the <body> element (it was located in your header.php file). This now outputs classes on your body element, one of them is the page-id-## class. I was able to reference that specifically and remove the header / navigation from displaying on this page: http://proactivewebmarketing.com/free-seo-analysis/

    You will see at the bottom of your style.css file I've added the CSS as well. If you ever want to restore the header on this page simply delete the rule.

    I now recommend that you browse the pages of your website to make sure this didn't cause any display issues. I didn't see any when I looked briefly. If all is well, remove the account you created for me to have access to your website.
     
    oakley56fila, Nov 20, 2013 IP