Tagged: ,

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • March 9, 2021 at 4:12 am #1286610
    willevo311

    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.

    Thanks
    will

    March 9, 2021 at 11:55 am #1286673
    Nikko

    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,
    Nikko

    March 9, 2021 at 4:24 pm #1286778
    willevo311

    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!

    ~Will

    March 10, 2021 at 6:11 am #1286978
    Nikko

    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,
    Nikko

    March 10, 2021 at 4:40 pm #1287176
    willevo311

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

    Please mark as closed

    March 11, 2021 at 4:14 am #1287289
    Nikko

    Hi Will,

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

    Best regards,
    Nikko

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • The topic ‘color bar instead of header’ is closed to new replies.