Change Grey Bar between Navbar and Slider 22

Last Reviewed: 29-Apr-15 (3.3.20) 3.1.* 3.2.* 3.3.*

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 in July 2013. Have learnt a lot from other Supporters (@ElectricFeet, @acub, @tomaja, and the maestro @d4z_c0nf, 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.

  • Ricardo

    And how can change the color of this bar? Greetings

    • 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.

  • Kim

    Hi! Is it also possible to remove the bar on all pages, except for the ‘main’ page?

    • I’ve updated the Snippet. To do what you want, you need to Remove All Grey Bars & then set color of the .home item.

      • Kim

        Thanks a lot!

  • 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…

  • Markus

    Is it possible to replace the grey bar by a picture? Greetings

    • 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?

    • 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.

  • 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!!

    • 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.

  • 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

    • Hi Daniel, you are not doing anything wrong, this should work fine!

  • dogg gy

    Hello, i have a question.

    First of all, my site is

    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.

    • Hi dogg gy, you seem to have fix your styling issues. Looks great!

  • Felipe

    how can i do to show all the slide image to top ? Thank´s for your help

    • Hi Felipe. I’d suggest the Forum would be a better place to get a solution for this, with a much wider audience to help fix problems. And please include a link to your Site.

  • 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.

    • Mmm, one I missed by the look of it!

      Easy to fix:
      .featurette-divider {
      display: none;

  • 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:

  • Hi,

    I was wondering is there a way to modify tc-header” ‘s color as gradient.

    I simply need to apply class=”lang:css”> height: 200px;
    background: -webkit-linear-gradient(left, #0479b5, #78be20); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(right, #0479b5, #78be20); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(right, #0479b5, #78be20); /* For Firefox 3.6 to 15 */
    background: linear-gradient(to right, #0479b5, #78be20); /* Standard syntax (must be last) */

    Whatever I have tried couldn’t make it, it wraps all the navbar area but the top border.

    Many Thanks in advance

  • Bill

    Is there a snippet code to change the color of the bottom bar just above the widget area? I have been unsuccessful in finding any. Thank you