Change Grey Bar between Navbar and Slider

Note : This snippet applies to Customizr version 3.1.x and below. It may not work with version 3.2+. Use with caution on 3.2+ and check the availability and type of the hooks in the Customizr hooks API.

Last Reviewed: 29-Mar-14

If you need to change Grey Bar between Navbar and Slider:

Where to copy/paste this code?
The simplest way is to use the Custom CSS section of the customizer option screen. If you have many customizations to make in CSS and PHP, then we strongly recommend you create a child theme. Everything you need to know about creating a child theme with Customizr here.

Remove the Grey Bar:

Credit: @fabioeliseo
 

Change the Grey Bar:

 

Change the Grey Bar on specific pages:

 


About Dave Bardell

My name is Dave Bardell (@rdellconsulting) and have been supporting the Forum since discovering this wonderful Theme. Have learnt a lot from other Supporters (@acub, @tomaja, @ElectricFeet, in particular). Have a library of snippets I've built up which in adding here, I'll try to acknowledge the original contributor but apologies to any I miss or wrongly attribute. daveb@rdellconsulting.com


20 thoughts on “Change Grey Bar between Navbar and Slider

    • Reply
      Dave Bardell Post author

      Err, if you look at the 2nd example, I think ‘green’ might be a clue? ;)

      Forgive my British sense of humour. I did make a quick change after this Snippet was published to include the 2nd item, so it’s possible you didn’t see it when you posted.

      Hope you’ve managed to sort it.

  • Reply
    Enrico Mestevers

    Hello, does the possibility exist to let indicate the respective side title and contribution title in the grey bar? Many thanks and greetings from Berlin | Germany…

    • Reply
      Dave Bardell Post author

      Sorry for the delay in responding. Did you resolve this?

      I’m not sure what sort of picture could replace the grey bar – what dimension were you thinking of? Won’t it look odd with the Slider following it?

    • Reply
      Calvin

      Hello, I am looking to do the same thing. I want to put a 5-10px diamond plate border on top of the slider. Thanks.

  • Reply
    G

    Hi! I am wondering how do you remove the spacing between the tagline and the slider? There’s a huge gap in between as a result of removing the menu/header box. Thanks in advance!!

    • Reply
      Dave Bardell Post author

      Sorry for delay in replying.

      Your topic is related to the theme general styling, can you please post this thread in the theme users forum : Forum.

      Include a link to your site so we can see exactly what you mean.

      Thanks and we’ll do our best to help.

  • Reply
    Daniel

    When I try entering this code in the child theme stylesheet it does not change, however if i enter it on the custom CSS from the customiz’it tab it works fine – am I doing something wrong in terms of adding code to the child theme? Thanks

  • Reply
    dogg gy

    Hello, i have a question.

    First of all, my site is http://www.ruksanna.nl

    Im trying to change to colour of my grey bar which i managed to do.
    But now i have another issue, as you can see i made my bar red. On the left and right of the page there is a border also (to the left of my logo and on the other side)

    how can i remove these lines, i would like to let the horizontal line as it is but change the side border to a white color so it wont be visual.

    I hope someone can help me do this.

  • Reply
    Dave

    Hello Dave,

    First of all your site is fantastic and thank you for taking the time to put this together. I apologize if I am simply missing this from another post on the site but I was able to successfully remove the grey bar beneath my navbar but I would also like to eliminate the white bar right below my page titles on all the pages. Thanx in advance and again if I missed this elsewhere I apologize.

  • Reply
    Hila

    Hi,
    first thank you for your time and your help,
    I trying to move the menu into the grey bar between navbar and slide, you can tell me please how to do it.
    my website is: magnet4event.com

Leave a Comment

Your email address will not be published. Required fields are marked *

Do you need to share some code? To display it in a nice looking syntax highlighter, wrap your code between the following tags (css code in this example) : <pre class="lang:css">YOUR CODE</pre> ( possible code language acronyms : css, php, xhtml, javascript, sql)

You may also use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">