Tagged: 

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • October 26, 2015 at 4:08 pm #524986
    viom

    Hi,
    I would like to center the logo and the secondary menu (in this case it is a language switcher) on the mobile version.
    Is there any easy way to do so?

    Thank you in advance!

    Best regards,
    Sebastian

    October 26, 2015 at 4:10 pm #524988
    Elliott

    Hi viom!

    The language switcher is already centered. For the logo it’s width is set to 80% so it’s a little off. Add this to your custom CSS to make it completely centered.

    @media only screen and (max-width: 767px)
.responsive #top .logo {
    width: 100% !important;
}

    Best regards,
    Elliott

    October 26, 2015 at 4:40 pm #525033
    viom

    Hi Elliott!
    Thanks for the quick reply. Still, language switcher is off towards right.

    Best,
    Sebastian

    October 28, 2015 at 5:21 am #525890
    Rikard

    Hi Sebastian,

    It looks centered on my end, could you post screenshot of what you are seeing on your end and in what browser please?

    Thanks,
    Rikard

    October 28, 2015 at 9:43 am #525955
    viom

    Hi Rikard,
    I noticed it looks not centered on iPhone (please find attached screenshot) and Samsung Galaxy S5. Also the top language menu is not centered.
    Thanks in advance,
    Sebastian

    October 30, 2015 at 1:43 pm #527347
    Yigit

    Hi!

    Please add following code to Quick CSS in Enfold theme options under General Styling tab

    @media only screen and (max-width: 480px) {
.responsive .logo {
    margin-left: 15px!important;
}}

    Cheers!
    Yigit

    November 3, 2015 at 6:11 pm #529535
    viom

    Thanks Yigit,
    Unfortunately still doesn’t work.
    Please find attached screenshot. I used responsitive design view in Firefox as it shows clearly the issue. Neither the logo nor language switcher is centered.
    Check this out:
    http://postimg.org/image/a504b7taf/

    Cheers!
    Sebastian

    November 4, 2015 at 4:11 pm #530144
    Andy

    Hi!

    which mobile device are you using? Try this code:

    @media only screen and (max-width: 767px) {
.responsive .logo {
    margin-left: 50px !important;
}}

    and adjust as needed.

    Clear browser cache and hard refresh a few times afterwards.

    Best regards,
    Andy

    November 12, 2015 at 1:32 pm #534715
    viom

    Hi,
    I tried on Nokia Lumia 1020, IPhone 5S and Samsung Galaxy S5. On all devices the logo is positioned differently and language menu on top is not centered. Situation gets even worse when moving the mobile to a landscape mode, then both logo and language menu is totally off-centered.
    Adjusting the margin can work only for one device as the screen resolutions differ.
    For some reason I changed something and now I get this green bar behind the menu and I can’t change it. What do I have to change to get rid of the green menu background (see picture attached)?
    Unwanted green menu background

    • This reply was modified 9 years ago by viom.
    November 16, 2015 at 5:45 pm #536707
    Andy

    Hi!

    use this code for centering language menu: 

    .av_secondary_right .sub_menu {
right: 39%;
}

    and adjust as needed.
    If you need different solutions for different screen sizes, then you need to adjust the media queries of my code. Check out this link about media queries: https://css-tricks.com/snippets/css/media-queries-for-standard-devices/

    Cheers!
    Andy

    November 17, 2015 at 5:24 pm #537453
    viom

    Hello again,
    First of all, I really appreciate great job of the Support Team.
    But… For some reason I just can’t get this logo centered on mobiles. I cloned the installation of the web to have a test web to play with and spent entire day doing so and I failed to center the logo. I removed all custom CSS, went back from the child to parent theme. For some reason codes you provide to center the logo don’t work on my web. Could you have a look and tell me what I am doing wrong?

    I tried alrady:

    @media only screen and (max-width: 767px)
.responsive #top .logo {
    width: 100% !important;
}

    and

    .responsive .logo {
left: 35%!important;
position: relative;
}
@media only screen and (max-width: 480px) {
.responsive .logo {
left: 25%!important;
position: relative;
}}

    and

    div .logo {
float: none;
position: absolute;
z-index: 1;
left: 50%;
-webkit-transform: translate(-50%, 0);
-moz-transform: translate(-50%, 0);
-ms-transform: translate(-50%, 0);
transform: translate(-50%, 0);
}

    and

    @media only screen and (max-width: 767px) {
.responsive .logo a {
display: inline-block;
vertical-align: middle;
}

@media only screen and (max-width: 767px)
.responsive .logo {
position: relative;
display: block;
width: 100%;
text-align: center;
}
}

    Also when I scroll down the menu background turns green like in the picture I pasted in the previous post. Any idea what to modify to have it white?

    Thank you in advance!
    Sebastian

    November 17, 2015 at 11:51 pm #537710
    Andy

    Hey!

    use this code to change menu’s background when scrolling: 

    #top #header_main_alternate {
background-color: transparent;
}

    For your logo you are using too many different coded, which may interfere each other. Make sure to use only one code. Use this one: 

    @media only screen and (max-width: 767px) {
.responsive.html_header_top.html_logo_center .logo {
left: 10%;
position: relative !important;
}}

    and adjust as needed.

    Cheers!
    Andy

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