How can I hide the Top Bar logo area for specific pages/posts?

edited February 2016 in BeBuilder

HELP ME! I have a local real estate client's website I'm working on using BeTheme and Muffin Builder. I want to be able to make the "featured image" more visible "above the fold" and hide the large top logo area on posts showing her "featured properties" category/slug -- She is insisting on the logo being so large for some reason, so I can't redesign the logo as a small image size. I've tested my idea using Chrome Code Inspector as follows:

.header-stack.header-center #Top_bar .logo {

        text-align: center;
        display: none;

}

How can I apply the above code to Muffin Builder or Custom CSS to get the desired dynamic layout? Here is the post page I'm testing:
http://janiemerkle.com/7-mandrake-irvine-university-park/. Again, I just need to have a different top logo area for post type layouts.

Thanks in advance if anyone can provide a solution or work-around.

Best Regards, Chad, Mpower Web Solutions

Comments

  • Hi,

    to remove the Top Bar logo area from specific pages/posts, you need to use on of the following css`s:
    .postid-xxx #Top_bar #logo { display: none !important; }
    .page-id-xxx #Top_bar #logo { display: none !important; }
    where xxx is post or page ID.
  • Thanks for the quick response. How can I get this to work for more than 1 post? Here is the custom CSS I'm trying to apply, but can only get one post to hide the top_bar logo:

    /* Page or Post Customization */ 

    .postid-723 #Top_bar #logo { display: none !important; } // Hide top logo area for Circle Dr, Newport Coast
    .postid-762 #Top_bar #logo { display: none !important; } // Hide top logo area for 3 Currents, Newport Coast
    .postid-877 #Top_bar #logo { display: none !important; } // Hide top logo area for Crystal Cove, Newport Coast
    .postid-1216 #Top_bar #logo { display: none !important; } // Hide top logo area for 18 Dauphin, Dana Point
    .postid-1555 #Top_bar #logo { display: none !important; } // Hide top logo area for Millbrook, Irvine
    .postid-1822 #Top_bar #logo { display: none !important; } // Hide top logo area for 7 Mandrake, Irvine
     
  • Also tried....

    /* Page or Post Customization-Circle Dr, Newport Coast */ 
    .postid-723 #Top_bar #logo { display: none !important; } // Hide top logo area for Circle Dr, Newport Coast

    /* Page or Post Customization-3 Currents, Newport Coast */ 
    .postid-762 #Top_bar #logo { display: none !important; } // Hide top logo area for 3 Currents, Newport Coast

    /* Page or Post Customization-Crystal Cove, Newport Coast */ 
    .postid-877 #Top_bar #logo { display: none !important; } // Hide top logo area for Crystal Cove, Newport Coast

    /* Page or Post Customization-18 Dauphin, Dana Point */ 
    .postid-1216 #Top_bar #logo { display: none !important; } // Hide top logo area for 18 Dauphin, Dana Point

    /* Page or Post Customization-Millbrook, Irvine */ 
    .postid-1555 #Top_bar #logo { display: none !important; } // Hide top logo area for Millbrook, Irvine

    /* Page or Post Customization-7 Mandrake, Irvine */ 
    .postid-1822 #Top_bar #logo { display: none !important; } // Hide top logo area for 7 Mandrake, Irvine

  • EUREKA! This format seems to be working:

    /* Page or Post Customization */ 
    .postid-536 #Top_bar #logo { display: none !important; }
    .postid-723 #Top_bar #logo { display: none !important; }
    .postid-762 #Top_bar #logo { display: none !important; }
    .postid-877 #Top_bar #logo { display: none !important; } 
    .postid-1216 #Top_bar #logo { display: none !important; } 
    .postid-1555 #Top_bar #logo { display: none !important; }
    .postid-1822 #Top_bar #logo { display: none !important; }

    Now, I just need to create a MediaQuery to at least show the logo on mobile under 768px.
  • If you want to know how to create media query, we suggest to read the following article http://www.w3schools.com/cssref/css3_pr_mediaquery.asp
  • Thanks! I was able to get it all figured out the way I wanted. I will certainly use the hint you provided on my other client sites if needed.
Sign In or Register to comment.
This website uses cookies

We use cookies to personalise content and ads, to provide social media features and to analyse our traffic. We also share information about your use of our site with our social media, advertising and analytics partners who may combine it with other information that you’ve provided to them or that they’ve collected from your use of their services.

Cookies are small text files that can be used by websites to make a user's experience more efficient.

The law states that we can store cookies on your device if they are strictly necessary for the operation of this site. For all other types of cookies we need your permission. This means that cookies which are categorized as necessary, are processed based on GDPR Art. 6 (1) (f). All other cookies, meaning those from the categories preferences and marketing, are processed based on GDPR Art. 6 (1) (a) GDPR.

This site uses different types of cookies. Some cookies are placed by third party services that appear on our pages.

You can at any time change or withdraw your consent from the Cookie Declaration on our website.

Learn more about who we are, how you can contact us and how we process personal data in our Privacy Policy.

Please state your consent ID and date when you contact us regarding your consent.