Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • July 23, 2014 at 1:12 pm #294935
    GOWD

    Hi, I uploaded a Logo that is 340px wide as advised but the menu icon is sitting on top of it when viewed on a Smartphone.

    July 23, 2014 at 1:13 pm #294936
    Ralph12

    Hi GOWD,

    Please see my solved topic re the same issue: https://kriesi.at/support/topic/mobile-main-menu-top-bar-questions/

    Kind regards,

    Ralph

    July 23, 2014 at 4:33 pm #295007
    GOWD

    Hi Ralph,
    I went to that thread and did exactly what it said.
    I added the first piece of code, didn’t work, added the second piece, didn’t work, took away the first piece and left the second piece, didn’t work, all it did was make the Logo smaller and the menu icon still overlapped it.
    Why can’t the menu item just display underneath the logo with a button that says “Menu” like loads of other themes do?

    You gave me this code that solved it like that for the Phone number info. to display and centre underneath the social media icons.

    .phone-info span {
    padding: 0px 0px;
    margin: 0px 0px 0px 0px;
    display: inline-block;
    }

    At the moment the Logo which is centred on the desktop and tablet displays goes off the screen after the “B” in Web on mobile in portrait view (am using Samsung Galaxy S3) with the menu icon obscuring the “W”

    July 23, 2014 at 4:50 pm #295025
    Yigit

    Hey!

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

    @media only screen and (max-width: 767px) {
.responsive .logo a, .responsive .logo img {
max-width: 82%;
height: auto !important; }}

    Best regards,
    Yigit

    July 23, 2014 at 6:23 pm #295064
    GOWD

    Hi Yigit, just applied that, it made the Logo smaller, it is now lining up to the right of centre and the Menu button still overlapped it so I changed the % until I got to 70% and now it is reduced to that size and the menu button is not overlapping it.

    This is not a good fix though as the Logo is now smaller and the menu button is twice it height.
    The Logo and menu button are not in line.
    In landscape mode on the phone the Logo is now randomly lining up to the left rather than centre.

    If the Social icons and phone number are arranged perfectly above them why can’t the Logo and menu be the same with a button that says “Menu” as not everyone knows what the menu icon means
    display: inline-block;

    July 24, 2014 at 5:34 pm #295518
    Ralph12

    Hi GOWD,

    You should be able to align your logo, with the mobile menu button, by adding a top margin to Yigit’s CSS snippet. So it should look something like this:

    @media only screen and (max-width: 767px) {
.responsive .logo a, .responsive .logo img {
max-width: 82%;
height: auto !important;
margin: 12px 0 0 0;}}

    A top margin of 12px aligns my logo, but your logo might require another number.

    Hope it works,

    Ralph

    July 25, 2014 at 12:55 pm #295901
    GOWD

    Hi Ralph, worked perfectly. Thank you.
    Do you have a section where I can suggest an update if the Social icons and phone number are arranged perfectly centred one above the other can the Logo and menu stack the same with a button that says “Menu” replacing the menu icon

    July 25, 2014 at 1:23 pm #295915
    Yigit

    Hi!

    You can request features and vote the ones that are already requested here – https://kriesi.at/support/enfold-feature-requests/

    Best regards,
    Yigit

    July 25, 2014 at 3:01 pm #295972
    GOWD

    Perferct, thanks Yigit, you may close this thread

    July 25, 2014 at 6:30 pm #296053
    Ralph12

    You’re welcome, GOWD. Glad it worked!

    Best,

    Ralph

  • Author
    Posts
Viewing 10 posts - 1 through 10 (of 10 total)
  • The topic ‘Mobile menu icon covering Logo’ is closed to new replies.