Tagged: ,

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
  • #1286610

    Hi Support,

    Hope you are well. I have disabled the header in a page but was hoping to add a color bar at the top of the page to help with the styling.. Is there a way to add a small color bar in place of the header? Or maybe disable the header and only show the color bar? I found an example at https://launchforprofit.com/free-download.

    The red bar at the top of the header. There is no menu and just goes into the main content. That is what I am trying to achieve.

    Any advice would be appreciated.



    Hi will,

    You can remove the menu and go directly to main content by setting Header visibility and transparency to Hide Header on this page
    Here’s a screenshot: https://imgur.com/jgBqfxe
    Hope this helps.

    Best regards,


    Hi Nikko,

    Thanks for the response. I already have the header disabled as you have shown. What I am trying to achieve is to remove the dead space that removing the header created and add a colored bar at the top. I will drop some screenshots in the private chat so you can see what I mean.

    Thanks for all of your help!! I really appreciate it!



    Hi Will,

    Please do the following for the red bar.
    1. Add a Color Section on top, change the background color to red (Styling > Background Colors) then in Advanced > Developer Settings > Custom ID Attribute, put redbar.
    2. Add a Text Block inside the Color Section and make the font color white.
    3. Go to Enfold > General Styling > Quick CSS, then add this code:

    #redbar {
        min-height: 0;
    #redbar .content {
        padding: 0;

    As for the bunch of whitespace in the screenshot, are those columns inside a Color Section? can you give us a link? so we can inspect further.

    Best regards,


    Hi Nikko,

    Thanks for that. I have it figured out now. I added as per instructions and it worked. It left some padding at the top which is where the spacing for the header was. (Originally it was white space I had an issue with but once I changed the color I was able to figure out what I needed to change to remove the padding.)

    I added this code to my custom css and it killed the space. The original padding was 88px and I switched it to 0px.

    .html_header_transparency #top .avia-builder-el-0 .container, .html_header_transparency #top .avia-builder-el-0 .slideshow_caption {
    padding-top: 0px;

    Just documenting for others if they need a fix. Thanks for all of your help! It is much appreciated!!

    Have a great day!

    Please mark as closed


    Hi Will,

    We’re glad to hear that :)
    Thanks for using Enfold and have a great day!

    Best regards,

Viewing 6 posts - 1 through 6 (of 6 total)

The topic ‘color bar instead of header’ is closed to new replies.