Viewing 18 posts - 1 through 18 (of 18 total)
  • Author
    Posts
  • January 18, 2014 at 12:39 am #211445
    rubieandersson

    I just looked at my site on a an iphone and it looks really bad, please help me.

    Previously, your team helped me adjust the header and the logo to look good on the website, but on mobile only a part of the logo is visible and none of the menu buttons are seen. Then after the slider there is a huge gap before the rest of the text.

    Is there a code to make the header on mobile be seen as it was without any customization (but still have it customized on desktop) and to delete the gap after the slider?

    Would really appreciate it.

    Thank you
    Rubie

    January 18, 2014 at 12:41 am #211447
    Josue

    Hi,

    Can you post the link to your website please?

    Regards,
    Josue

    January 18, 2014 at 12:45 am #211451
    rubieandersson
    This reply has been marked as private.
    January 18, 2014 at 12:47 am #211454
    rubieandersson
    This reply has been marked as private.
    January 18, 2014 at 12:48 am #211455
    Josue

    Hey!

    The link you provided is not a WordPress installation:
    http://stocktownproduction.com/

    Best regards,
    Josue

    January 18, 2014 at 12:51 am #211459
    rubieandersson
    This reply has been marked as private.
    January 18, 2014 at 1:28 am #211470
    Josue

    Hi,

    Can you create an administrator account and post it here as a private reply?

    Regards,
    Josue

    January 18, 2014 at 2:31 am #211479
    rubieandersson
    This reply has been marked as private.
    January 18, 2014 at 3:19 am #211484
    rubieandersson

    Would really need the mobile to be presentable as possible, any idea how to modify the logo to be completely visible on mobile, to make the menu show up and to delete the big gap that is between the menu and the slider?

    Can’t thank you enough for your help.

    Best,
    Rubie

    January 18, 2014 at 10:20 pm #211718
    Ismael

    Hey!

    Please do the following:

    1.) Add this to increase the height of the logo on mobile view:

    @media only screen and (max-width: 767px) {
.responsive .logo {
height: 130px;
}
}

    2.) Use this to remove the gap below the layer slider:

    @media only screen and (max-width: 767px) {
.responsive #main .container_wrap:first-child {
border-top: none;
height: 150px !important;
}
}

    3.) Did you set a “Responsive Header Main Menu” on Enfold > Header?

    Best regards,
    Ismael

    January 20, 2014 at 12:53 am #212038
    rubieandersson

    @Ismael Thank you so much for your help!! Truly appreciate it. Now the logo is visible and the gap is removed.

    I set it to ‘Display as Drop Down menu’ on ‘Responsive Header Main Menu’, however the slider menu doesn’t work as well.

    1.) Menu is still not visible on mobile. I’m attaching my CSS code of the header and logo, is there anything interfering which I can change to make the menu visible?

    2.) I would like to change the size of the logo on mobile, but when I change the height in the coding you just gave me, only the header gets smaller, how can I adjust both to be smaller?

    Here is the CSS coding:

    
.social_header #header_main .container, .social_header .main_menu ul:first-child > li a { height: 200px; line-height: 116px; }

.logo, .logo a, .logo img { max-width: 126px!important; max-height: 126px!important; -webkit-transition: max-height .5ms ease-in-out;
    -moz-transition: max-height .5ms ease-in-out;
    -o-transition: max-height .5ms ease-in-out;
    transition: max-height .5s ease-in-out; }

.header-scrolled .logo, .header-scrolled .logo a, .header-scrolled .logo img { max-height: 100px!important; 
-webkit-transition: max-height .5ms ease-in-out;
    -moz-transition: max-height .5ms ease-in-out;
    -o-transition: max-height .5ms ease-in-out;
    transition: max-height .5s ease-in-out; }

#header_main .container, .header_color .main_menu ul:first-child > li > a {
height: 126px!important;
line-height: 180px!important;
}
.fixed_header #main {
padding-top: 126px;
}

strong.logo img, #header_main .container, .main_menu ul:first-child > li a { }

    Thank you so much!

    Best Regards,
    Rubie

    January 20, 2014 at 3:48 am #212069
    Ismael

    Hey!

    1.) You can use this for the actual logo:

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

    Adjust the header using the code I posted earlier.

    2.) Did you modify the menu? Use this to display the menu.

    @media only screen and (max-width: 767px) {
.responsive #header .main_menu ul {
display: block;
}
}

    Cheers!
    Ismael

    January 20, 2014 at 6:34 am #212111
    rubieandersson

    Thank you for your help!

    Now the menu is visible, but in two separate rows and all the sub menu items are visible. The only thing I modified in the menu is the font. Any idea how to fix this?

    Thank you so much,
    Rubie

    January 21, 2014 at 3:09 am #212580
    rubieandersson

    This is what I mean

    http://stocktownproductions.com/wp-content/uploads/2014/01/photo-1.png

    Anyone can help me? Would greatly appreciate it.

    Thank you,
    Rubie

    January 21, 2014 at 11:13 am #212702
    Dude

    Hi!

    The menu/dropdown doesn’t support small screen sizes. It seems like you deactivated the mobile menu (slide out menu or dropdown) and thus the menu seems to be broken on small screens. Please revert the changes you made (make a backup first), then make sure that the mobile menu works again. Afterwards re-apply your custom code until the menu breaks again – then we know which code is the culprit.

    Best regards,
    Peter

    January 21, 2014 at 7:24 pm #212903
    rubieandersson

    @Dude

    Thank you so much for your help. However, even without all the custom coding that I made there is still no menu visible on mobile. I tried both the dropdown and the slider options. I really need this to work today so would be so thankful for help. Where can I activate the mobile menu?

    Best Regards,
    Rubie

    January 21, 2014 at 7:34 pm #212911
    Devin

    Hey!

    There is an error in your avia.js on line 1299. It should be:
    if(st < el_height/1.5)

    That should fix the js file to correctly run and show the mobile menu icon selection.

    Best regards,
    Devin

    January 21, 2014 at 7:42 pm #212921
    rubieandersson

    Great!! Thank you so so much!! Greatly appreciate all your help, that fixed it.

  • Author
    Posts
Viewing 18 posts - 1 through 18 (of 18 total)
  • The topic ‘Layout on mobile’ is closed to new replies.