Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • June 2, 2018 at 4:41 pm #965897
    Tiabliss

    Hi there,

    I need help with two mobile related issues WITHOUT it having any impact on my desktop site (as I like how this looks).
    My website is tiablissmakeup.co.uk
    The header and menu on the desktop looks great, but on a mobile the menu is all smushed in the middle very close together and the header is all squished and looks odd.
    See below:
    https://drive.google.com/open?id=1YUsxu7EmDPhrV3tyumK0FFAAFN8EyMM9
    https://drive.google.com/open?id=1ufMJ0NLpHf7xxmywCYSKV9RVBYgkdVvj

    How can I rectify these issues?
    Many thanks

    June 3, 2018 at 3:15 am #966023
    Jordan Shannon

    Hey Tiabliss,

    Thanks for sharing the screenshot. If possible, please provide a link to the site in question so we can look into this issue further.

    Best regards,
    Jordan Shannon

    June 30, 2018 at 9:53 pm #979638
    Tiabliss

    Hi Jordan,

    Sure, see attached.
    As mentioned, the desktop site is fine, it’s only the mobile mega menu.

    July 1, 2018 at 10:46 am #979783
    Rikard

    Hi,

    Thanks for that. Please try the following in Quick CSS under Enfold->General Styling:

    @media only screen and (max-width: 479px) {
.responsive .logo img {
  max-width:80%;
}
}

    Best regards,
    Rikard

    July 3, 2018 at 9:59 pm #980782
    Tiabliss

    Hi Rikard,

    It’s made the menu on the desktop site further apart, but the mobile site hasn’t changed.

    July 4, 2018 at 7:59 am #980963
    Rikard

    Hi,

    The code I sent will only affect small screen, so I don’t think the changes you are seeing are related. Try this instead:

    @media only screen and (max-width: 479px) {
.responsive .logo img {
  max-width:70%;
}
}

    Best regards,
    Rikard

    July 7, 2018 at 9:34 pm #982584
    Tiabliss

    Hi Rikard,
    This didn’t work either.
    All it did was make my Home page text HUGE.
    Can you do anything else?

    July 7, 2018 at 10:11 pm #982595
    Guenni007

    for the burger menu – you can do this:

    #av-burger-menu-ul {
    vertical-align: top !important;
    padding: 125px 0 !important;
}

.html_av-overlay-side #top #wrap_all .av-burger-overlay li a {
    line-height: 1.8em;
}

    and you have to find a solution for ipad ( your menu is than not the hamburger ones) and some menu points float over the following content.

    best could be to break the menu at 990px (Enfold Menu Options Dialog)

    ___________

    for your logo on small screens :

    @media only screen and (max-width: 767px) {
	.responsive #top #wrap_all .container {
	    width: 95%;
	    max-width: 95%;
	}
	.main_menu ul:first-child > li > a {
		padding: 0 8px !important;
	}
}
    July 8, 2018 at 7:19 am #982649
    Rikard

    Hi,

    Thanks for sharing @guenni007, did you try that out @tiabliss?

    Best regards,
    Rikard

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