Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • June 30, 2015 at 11:15 pm #466730
    Gwellins

    Hi,

    I added a widget to the header widget using the documentation here – http://kriesi.at/documentation/enfold/adding-a-widget-area-to-the-header/

    However on mobile devices or devices with smaller screens the second logo goes under or over the main logo.

    Overlay on Logo

    Please can you guide me on fixing this.

    Kind regards,

    Gideon

    • This topic was modified 9 years, 4 months ago by Gwellins.
    July 2, 2015 at 9:17 am #467352
    Ismael

    Hi Gwellins!

    Thank you for using Enfold.

    The screenshot is not working. Please check. A link to the site will help. Try to use the Quick CSS field to change the position of the second logo on mobile device. You have to use css media queries in order to target smaller screens. http://www.w3schools.com/cssref/css3_pr_mediaquery.asp

    Best regards,
    Ismael

    July 2, 2015 at 9:29 am #467360
    Gwellins

    Hi Ismael,

    Thanks for the response.

    Sorry that the screenshot isn’t working. The site is advancedparking.co.uk. Could you give me some pointers please as my CSS isn’t the best.

    Kind regards,

    Gideon

    July 3, 2015 at 3:26 pm #468064
    Yigit

    Hey!

    Please add following code to Quick CSS 

    @media only screen and (max-width: 1200px) {
#header .widget {
  left: 50%;
}}
@media only screen and (max-width: 480px) {
#header .widget {
  left: 69%;
}}

    And then, Please go to Enfold theme options > Header > Mobile Menu > Header Mobile Menu activation and choose 990px.

    Best regards,
    Yigit

    July 3, 2015 at 3:30 pm #468068
    Andy

    Hey!

    you would need to tell us what do you want to achieve instead. We can’t know that :). Do you want to remove one logo? if yes which one? do you want to decrease image size of logo? so many possible solutions, so just tell us what you want. Hopefully you like this solution:

    @media only screen and (max-device-width: 736px) {
strong.logo {
width: 35% !important;
}
.textwidget {
width: 76%;
margin-left: 126px;
}}

    Regards,
    Andy

    July 3, 2015 at 3:49 pm #468089
    Gwellins

    Thanks Andy,

    Problem with that code is that it changes the width of the pages. The pages are much thinner with the code implemented, even on a desktop.

    The ideal solution would be that the pages content does not change and goes by the general responsive rules but the 2nd logo moves under the main logo on mobile devices.

    Any thoughts?

    Kind regards,

    Gideon

    July 3, 2015 at 3:52 pm #468091
    Yigit

    Hey!

    Have you tried the code i posted – https://kriesi.at/support/topic/2nd-logo-responsive/#post-468064
    Alternatively, to remove second logo, you can use

    @media only screen and (max-width: 1200px) {
#header .widget { display: none; }}

    Regards,
    Yigit

    July 3, 2015 at 3:54 pm #468095
    Gwellins

    Hi Yigit,

    Thanks for the quick response.

    I tried the original code and instructions but that squished the content on the pages.

    I’d rather not remove the second logo on mobile screens but would like to move it under the logo.

    Kind regards,

    Gideon

    July 6, 2015 at 5:50 am #468657
    Rikard

    Hi!

    It seems there is not enough space for both logos display either inline or as blocks on smaller screens, I’m not sure what layout you would prefer?

    Regards,
    Rikard

    July 6, 2015 at 9:15 am #468731
    Gwellins

    Hi Rikard,

    Thanks for the response. I’ve decided to just remove this logo on mobile screens.

    Kind regards,

    Gideon

  • Author
    Posts
Viewing 10 posts - 1 through 10 (of 10 total)
  • The topic ‘2nd Logo Responsive’ is closed to new replies.