Remove main/footer menus from front page only

  • Resolved anoctave

    (@anoctave)


    8 years, 3 months ago

    I appreciate this very well designed theme, but I have a couple of things I would like to do to customize to my preference. I have a static front page with a left sidebar. The left sidebar is being used as a pictoral menu with the same links as the main menu. I would like to have both the main menu and the footer menu not appear just on the front page. (I am using the theme for CMS rather than a blog.)

    The one other issue I have is to remove the dark bar at the bottom of the page. I used the “display:none;” to eliminate the top bar.

    The page is at https://www.dj-group.org/private/wordpress/wordpress4/

Viewing 7 replies - 1 through 7 (of 7 total)
  • Theme Author Shaped Pixels

    (@shaped-pixels)

    Greetings…and thank you for that kind comment about my theme ??

    First, if I understand correctly, you want the main menu and footer menu to not appear on the front page? If so, you can do this to hide them:

    .home .site-header .site-navigation,
.home #footer-nav {
    display: none;
}

    The other question about the dark bar (actually a shadow) can be done this way:

    #page {
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}
    Thread Starter anoctave

    (@anoctave)

    Wow! That was a fast reply and it worked. Thank you.

    The coding for hiding the menus intrigued me. How can I do the reverse. Put content in the front page footer that will not appear in the rest of the site?

    One more question and I think everything will be perfecto. How do I change the color of the site title and the mouseover. Everything I’ve done so far doesn’t change anything.

    This really has been an easy site to get the way I want.

    Theme Author Shaped Pixels

    (@shaped-pixels)

    Fast hey ??

    Hiding something on a particular page is done with a couple things:

    1. getting the id or class of a page or post
    2. using custom css to hide the element

    If you use your browser to look at the source code of a page, look for the <body> tag in the upper area of the code. This will have classes added to it. For example, on the home page, you will see the body tag with this class of “home“

    <body class="home...etc">

    So with your previous question, you will notice I created some custom CSS that targets that page with the class “home” that is in the<body> tag. You can also use an ID also found on the body tag too. For example, if you go to a page in your site and look at the body tag, you might see something like this:

    <body class="page page-id-22">

    In the previous example, instead of using “home” in my custom CSS, I could do it like this:

    .page-id-22 .site-header .site-navigation,
.page-id-22 #footer-nav {
    display: none;
}

    That would target only that page.

    Using display: none; will hide the element you want to hide from the front-end view. It still loads in the source code, but it’s just not shown to the person visiting the page.

    Regarding the site title colour, it looks like I missed adding that setting to the customizer colour tab. I will need to do that as an update. In the meantime, you can do this custom CSS:

    .site-title a,
.site-title a:visited {
   color: #000000;
}
.site-title a:hover {
   color: #000000;
}

    You can of course change the colours for the above to your needs by replacing the black colour #000000

    Theme Author Shaped Pixels

    (@shaped-pixels)

    Forgot to answer the part of content in the footer but not the rest of the site…if this is for widget content. Use a plugin like Display Widgets to publish to select pages, or, if you use Jetpack, it has it’s own version called Widget Visibility. You can read more about this here..

    Display Widgets on Select Pages

    Thread Starter anoctave

    (@anoctave)

    Thank you once again. Whenever I encounter a good and generous theme designer, I always learn so much.

    Thread Starter anoctave

    (@anoctave)

    One more comment. Especially thank you for the

    page-id-22 .site-header .site-navigation,
    .page-id-22 #footer-nav {
    display: none;
    }

    Because the WP posts/pages are dynamically presented to the viewer, I always thought those classes were dynamically created as the page was viewed, so I never thought I could use those classes in the style sheet. So this was a revelation to me.

    Hi,
    I am just having the same need- to hide my right menu on the front page, I see the solution has been helpful, and so the my question is a very basic one: the below mentioned code
    “.home .site-header .site-navigation,
    .home #footer-nav {
    display: none;”

    }
    should be inserted where exactly? on page.php file (of the template I am using?) anywhere on it? Thank you, it is really no obvious to me! ??

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Remove main/footer menus from front page only’ is closed to new replies.