Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • November 15, 2018 at 12:36 am #1033739
    zizibe1

    Hi,

    On my front page, just below the header and above the fullscreen slider, I would like to add a thin black fullwidth bar with a white text in it: “Christmas offer: please click here” (text-align center). The text should be a link to my page “News”.

    I’ve already tried this solutions:

    1. I added a color section with a text block and a linked text in it to the front page, just above the fullscreen slider. But the color section always was too high, no matter which custom height I chose.

    2. I found this post: https://kriesi.at/support/topic/add-a-thin-bar-below-the-header/?login_error. I tried to add a widget area to the header, but I didn’t get anywhere.

    Could you please tell me how to solve this?

    Best regards,
    zizibe1

    November 16, 2018 at 4:44 am #1034256
    Rikard

    Hey zizibe1,

    Thanks for the screenshot, could you post a link to where we can see the element in question as well please? We need to inspect it in order to give you accurate CSS to use.

    Best regards,
    Rikard

    November 16, 2018 at 11:32 am #1034373
    zizibe1
    This reply has been marked as private.
    November 20, 2018 at 4:00 pm #1035627
    Victoria

    Hi zizibe1,

    You can add a fullwidth submenu and make it black.

    Best regards,
    Victoria

    November 24, 2018 at 7:21 pm #1037280
    zizibe1

    Hi Victoria,

    Thank you for your reply.

    I don’t know if I took the right steps, but here’s what I did:

    In the back-end of my website, I went to Pages > Home and added a fullwidth submenu item above the fullscreen slider. Then I clicked on the fullwidth sub menu item and chose “Build simple custom menu”.

    I deleted menu item 2. To menu item 1, I added:

    – Menu Text: Christmas offer please click here
    – Text Link: (a link to my page NEWS)

    Under “Menu Colors”, I chose “Socket”.

    Finally, to make the fullwidth submenu thinner, I added the following code to the bottom of Quick CSS:

    #top .av-submenu-container {
    height: 30px;
}
#top .av-subnav-menu > li {
    padding: 4px 0;
}
#top .sticky_placeholder {
    height: 29px;
}

    Now, the fullwidth submenu on my front page looks alright to me.

    But I would like to change the hover color of the white text of the fullwidth submenu to grey (#969696).

    Could you please tell me how to achieve this?

    Best regards,
    zizibe1

    November 26, 2018 at 10:45 pm #1037812
    Victoria

    Hi zizibe1,

    Here is the code you can put in Enfold > General Styling > Quick Css,  if it does not work, put into themes/enfold/css/custom.css

    
.socket_color #av-custom-submenu-1 li:hover a .avia-menu-text .p1 strong {
  color: #969696;
}

    If you need further assistance please let us know.

    Best regards,
    Victoria

    November 26, 2018 at 11:36 pm #1037845
    zizibe1

    Hi Victoria,

    Great! I added the code to Quick CSS and it worked fine.

    Thank you very much for your support.

    You can close this topic now.

    Best regards,
    zizibe1

    November 27, 2018 at 1:09 am #1037870
    Jordan Shannon

    Hi,

    I’m glad this was resolved. If you need additional help, please let us know here in the forums.

    Best regards,
    Jordan Shannon

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • The topic ‘Thin bar below header on front page’ is closed to new replies.