Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • October 7, 2019 at 1:45 pm #1145753
    Japracool

    Hi guys,

    I just added new custom header widget area based on https://kriesi.at/documentation/enfold/header/#toggle-id-2 and succeed.

    But I am having problem with the styling since I only know little bit of CSS.

    Check out this picture:

    I want to move the top left picture, to the right side center with the logo.

    October 7, 2019 at 2:20 pm #1145777
    Victoria

    Hey Jeffrey Anthony,

    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

    
@media only screen and (min-width:990px){
    #text-9 {
        width: 30%;
        position: absolute;
        left: 38vw;
        top: -40px;
    }
     .header-scrolled #text-9 img,
     .header-scrolled.header-scrolled-full #text-9 img {
         width: 60%;
     }

}

    If you need further assistance please let us know.

    Best regards,
    Victoria

    October 8, 2019 at 7:15 am #1146034
    Japracool

    Thank you Victoria,

    I made some changes:

    @media only screen and (min-width:990px) {
    #text-9 {
        width: 10%;
        position: absolute;
        left: 71vw;
        top: 0px;
    }
     .header-scrolled #text-9 img,
     .header-scrolled.header-scrolled-full #text-9 img {
         width: 60%;
     }
}

    So it looks like this:

    But I have minor problem in iPhone X

    It doesn’t look nice, I guess I should hide/remove it? How do I hide/remove it in iPhone X? Or do you have a better solution?

    • This reply was modified 5 years, 2 months ago by Japracool.
    October 8, 2019 at 12:28 pm #1146129
    Rikard

    Hi,

    What exactly do you want to change in the mobile view? If you want to hide the widget on phones then you can try this CSS:

    @media only screen and (max-width: 767px) {
#text-9 {
  display:none;
}
}

    Best regards,
    Rikard

    October 9, 2019 at 9:42 am #1146437
    Japracool

    Thank you Rikard. Just exactly what I want.

    October 10, 2019 at 3:57 am #1146719
    Rikard

    Hi,

    Great, I’m glad that we could help. Please let us know if you should need any further help on the topic or if we can close it.

    Best regards,
    Rikard

    October 13, 2019 at 7:41 pm #1147600
    Japracool

    You can close it Rikard.

    October 14, 2019 at 4:47 am #1147692
    Rikard

    Hi,

    Thanks for letting us know, I’ll close this thread for now then. Please open a new thread if you should have any further questions or problems.

    Best regards,
    Rikard

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • The topic ‘Styling Custom Header Widget Area’ is closed to new replies.