Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • May 10, 2021 at 8:25 am #1299289
    Jo

    Dear Enfold Team,

    I value your theme very much and already use it several times.
    Now I have a challenge that I unfortunately cannot manage on my own.

    I would like to display the logo in two different heights / widths depending on the width.
    Despite some tips (logo / shrinking header) from the forum, it stays with me as follows:
    Screen width> = 989 —-> Logo 206×113
    768 <= screen width width <= 988 —-> Logo 103.9×57
    Screen width width = 767 —-> Logo 206×113
    Screen width <= 766 —-> 145.8×80

    I would like to achieve the following:
    Screen width> 500px —> Logo 206×113
    Screen width <= 500 px —> Logo 176×97

    I would be very happy to receive a suggested solution.
    You can see the behavior at https://www.doppelpunkt.ruhr/

    Best regards
    Joachim

    P.S .: In a certain screen width area, the left edge of the logo is partly below the container width. Do you have a suggestion for a solution?

    May 11, 2021 at 3:20 pm #1299697
    Yigit

    Hey Jo,

    Thanks for contacting us!

    1- Please add following code to Quick CSS field in Enfold theme options > General Styling tab

    @media only screen and (max-width: 500px) {
.responsive .logo img {
    max-height: 97px;
}}

    2- Please remove following code

    #top #header .container {
    width: 1552px;
    max-width: 80%;
}

    then go to Enfold theme options > Header > Header Behaviour and disable “Let logo and menu position adapt to browser window” option

    Best regards,
    Yigit

    May 11, 2021 at 3:57 pm #1299715
    Jo

    Dear Yigit,
    thank you very much.
    Unfortunately there is a behaviour, I don’t understand.
    What is happening with the logo for screen width between 768px and 988px. Is this a feature or a mistake?

    Due to the designer requirements I had positioned the logo and the hamburger menu icon outside of the main container.
    Your solution has removed this effect (step 2/3). Is there any other option to position the logo left of the container and the hamburger menu right of the container.

    Best regrads,
    Joachim

    May 13, 2021 at 11:20 am #1300110
    Yigit

    Hi,

    Please try adding following code to Quick CSS as well :)

    @media only screen and (max-width: 800px) {
#top #header .container {
    width: 100%;
    max-width: 100%;
}
}
@media only screen and (max-width: 990px) and (min-width: 800px) { 
#top #header .container {
    max-width: 700px;
    padding: 0;
}
}

    Best regards,
    Yigit

    May 18, 2021 at 2:06 pm #1300989
    Jo

    Dear Yigit,
    thank you very much.
    Based on your solution, I experimented a little and have now found a satisfactory solution.
    And also better understood CSS. ;-)

    Best regards,
    Jo

    May 18, 2021 at 2:08 pm #1300990
    Yigit

    Hi Jo,

    You are welcome! :)

    For your information, you can take a look at Enfold documentation here – https://kriesi.at/documentation/enfold/

    If you have any other questions or issues, feel free to start a new thread under Enfold sub forum and we will gladly try to help you :)

    Enjoy the rest of your day!

    Best regards,
    Yigit

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • The topic ‘Shrinking of logo’ is closed to new replies.