CODEWITHSUNDEEP
htmlcss
Icarox
Icarox

Reputation: 63

How can I hide Section on home page?

I've got this code here:

<head></head>

  <body class="home page page-id-529 page-template page-template-template-h…up-blog tax-has no-child admin-bar-showing customize-support">

<header>
    <section id="top-bar"></section>
    <div id="mobile-menu"></div>
    <section id="header-container">
        <div class="wrapper">
            <section id="logo-wrapper" class="one_fourth"></section>
            <!--

             end logo 

            -->
            <section id="navigation-wrapper" class="three_fourth last">
                <nav>
                    <div class="menu-primary-menu-container">
                        <ul id="menu-footer-menu-1" class="sf-menu sf-js-enabled sf-arrows">
                            <li id="menu-item-3982" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-3982"></li>
                            <li id="menu-item-4094" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-4094"></li>
                            <li id="menu-item-4095" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-4095"></li>
                            <li id="menu-item-4096" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-4096">
                                <a href="http://localhost:8888/WebNueva/wordpress/submit-listing-2/"></a>
                            </li>
                        </ul>
                    </div>
                </nav>
            </section>
            <!--

             end navigation 

            -->
            <div class="clearboth"></div>
        </div>
    </section>
    <div id="header-border"></div>
</header>

And I know how to hide Header in Homepage just like this:

body.home header {display:none}

But this hides whole header with sections, and I'd like to hide only header-container section and keep top-bar section showing.

How can I hide onlu header-container section?

Regards

Upvotes: 1

Views: 2520

Answers (2)

Guffa
Guffa

Reputation: 700342

Target the element inside the header:

body.home header #header-container {display:none}

As the id is unique in the page, that would be enough unless you are using the same style sheet for another page where the id is reused for something else:

#header-container {display:none}

Upvotes: 1

maček
maček

Reputation: 77778

Make sure you target the specific element you want to hide

body.home #header-container {
    display: none;
}

If you use body.home header, that matches the <header> element.

Use body.home #header-container to match the <section id="header-container"> element.

Upvotes: 2

Related Questions