Tagged: 

Viewing 20 posts - 1 through 20 (of 20 total)
  • Author
    Posts
  • May 26, 2016 at 10:06 am #638614
    tobee_hh

    Hey guys,

    is it possible to add 2 colored horizontal “design lines” on top of each other right below the menu/logo area of the enfold theme ?

    Best regards,
    t.

    May 26, 2016 at 9:35 pm #638979
    Jordan

    Hey tobee_hh,

    Thanks for getting in touch with us!

    Would you mind posting us a screenshot/mockup of what you would like to achieve? You can upload the screenshot to imgur.com or dropbox and share the link here :)

    Also provide a link to your site in the private data section.

    Best regards,
    Jordan

    May 27, 2016 at 9:40 am #639189
    tobee_hh

    Hello, i can only share a mockup

    May 28, 2016 at 4:37 am #639649
    Ismael

    Hi,

    Yes, that’s possible with css. You can apply the first line in the header container:

    #header {
    border-bottom: 20px solid red;
}

    .. And the second line above the main title container:

    .title_container {
    border-top: 20px solid blue !important;
    margin-top: 19px;
}

    This might not work if you don’t have the title container enabled. Once the site goes live, let us know so that we provide a better solution.

    Best regards,
    Ismael

    June 1, 2016 at 11:45 am #641392
    tobee_hh

    Thank you for the code!

    The first, red line is working. However, no second line shows up. Is it possible to vary the line in thickness?

    I added the code in quick CSS

    Edit: Now i see what you did there. I don’t want to use any titlebar however. Is it possible to add a second line to the header container right below the first one?

    • This reply was modified 8 years, 5 months ago by tobee_hh.
    June 3, 2016 at 5:21 am #642363
    Ismael

    Hi,

    We need to inspect the page in order to provide the correct css code. Let us know once the site is live.

    Best regards,
    Ismael

    June 21, 2016 at 8:19 pm #651688
    tobee_hh

    Here is the site: i need to add a line right below the existing red one :)

    June 23, 2016 at 7:56 pm #652711
    Andy

    Hi,

    try this code inside of Quick CSS field:

    .container.av-logo-container {
border-bottom: 1px solid red;
top: 9px;
}

    and adjust as needed.

    Best regards,
    Andy

    June 23, 2016 at 10:33 pm #652763
    tobee_hh

    Hey Andy,

    thx for the advice! Sadly it doesn’t work The line is centered, however it does not reach the end of the window left and right.

    June 24, 2016 at 9:35 am #652937
    tobee_hh

    Hey Andy,

    i looked at it again and must say that this doesn’t work. Isn’t it possible to add the line right within the header section. This way the line doesn’t seperate from the other line when scrolling.

    June 24, 2016 at 9:57 am #652945
    tobee_hh

    Hey Andy,

    from Ismael’s approach i tried

    #header {
    border-bottom: 20px solid red;
    }

    #header {
    border-bottom: 10px solid grey;
    }

    However only the last one is shown :(

    June 24, 2016 at 10:09 am #652952
    Guenni007

    you want under active and hovered main menu points a double line?

    #top #avia-menu li a:active, #top #avia-menu li a:hover {
    border-bottom: 2px solid red;
    margin-bottom: 0 !important;
}

.avia-menu-fx {
    bottom: 4px;
    height: 2px;
}

    • This reply was modified 8 years, 4 months ago by Guenni007.
    June 24, 2016 at 10:15 am #652953
    tobee_hh

    Hey Guenni007,

    no, my intent is to have two horizontal lines with different sizes and colours on top of each other full-width in the bottom border area of the menu section.

    June 24, 2016 at 10:35 am #652963
    Guenni007

    those two lines should stay static on that place , and what do you like to do with those lines in the menu?

    i would try to do it via #header and #header_main

     #header {
    border-bottom: 20px solid red !important;
}

#header_main {
    border-bottom: 10px solid grey !important;
}

    well i do not know if on all enfold header options the #header and #header_main are the same size or if there are some paddings – but on my test installation this works.

    • This reply was modified 8 years, 4 months ago by Guenni007.
    June 24, 2016 at 10:48 am #652969
    Guenni007

    and if you like to have a little distance between those lines setup a margin on the bottom of #header_main

    #header_main {
    border-bottom: 10px solid grey;
    margin-bottom: 2px;
}
    June 24, 2016 at 11:21 am #652985
    tobee_hh

    Guenni, you are the man!

    Thanks and cheers!

    :)

    June 24, 2016 at 11:27 am #652989
    tobee_hh

    One remaining question:

    How to change the color to specific hex colors instead of solid red

    June 24, 2016 at 4:43 pm #653063
    Andy

    Hi,

    just use hex color code instead:

    #header_main {
    border-bottom: 10px solid #d22323;
}

    Best regards,
    Andy

    June 26, 2016 at 11:51 am #653527
    Guenni007

    yes – sorry – i used your selection above.
    you can use every colordefinition you like – even rgb or rgba values.

    June 27, 2016 at 6:21 am #653663
    Rikard

    Hi,

    Thanks for helping out @Guenni007, much appreciated :-)

    Regards,
    Rikard

  • Author
    Posts
Viewing 20 posts - 1 through 20 (of 20 total)
  • You must be logged in to reply to this topic.