Sketch Theme Custom CSS Mobile Menu Location

  • Unknown's avatar
    melanieianderson · Member ·

    Hi,

    I’ve added a bit of custom CSS to my site to align the menu/change colors, etc. However, when I view the site on my mobile device (Samsung Note 3 Phone) using Chrome, the Menu button appears all the way to the far right, off of the screen. I assume this is because I specified the location of the menu container/button for web browsing on a computer, but it looks completely weird on a mobile device.

    Is there a way in the custom CSS that I can specify the location of the menu button for mobile devices?

    Thanks so much!
    Melanie

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    thesacredpath · Member ·

    Hi Melanie, this may take me a bit of time to sort out. If you are agreeable, I would suggest taking out all of the nav related CSS that controls positioning of the menu (except for the stuff in your media query) so that things at points narrower than 1200px return to the original design. You can also leave in nav related things that don’t have to do with positioning.

    We can then work from there to get the menu stuff to work and display they way you want it. I think this would be the easiest and the less complicated route. Let me know what you think.

  • Unknown's avatar
    melanieianderson · Member ·

    Hi!

    I’m agreeable to that. Essentially I added code to make the menu show up in a computer sized browser as a single row of links along the top in a clean looking fashion (so you don’t have to click on Menu to see the page options). So ideally I’m looking for that same look, but with the Menu button being in a normal spot for the mobile view. Hopefully that makes sense.

    So, on that note, I commented out the nav parts I had changed to make the menu link up cleanly along the top, but kept the other code. Do I need to remove anything else?

    Thanks so much for your help, I really appreciate it!
    Melanie

  • Unknown's avatar
    melanieianderson · Member ·

    Oops, and I should say, when I comment out that code I just did, the mobile menu shows up just fine as is. So I guess the real question/help I need is how to align the menu links along the top of the browser without messing up the mobile menu in the process. :)

    Thanks for any leads you can provide! I commented out the pieces I used before if that is any help at all.

  • ehtis · Staff ·

    the real question/help I need is how to align the menu links along the top of the browser without messing up the mobile menu in the process. :)

    I suppose you want the menu bar to be horizontal in a straight line, at the top. Is that so? This code should do it:

    /* This will increase the menu width, so items are in one line */
@media screen and (min-width: 1200px) {
.main-navigation {
    max-width: 100%;
  }
}

/* The following will move up the menu, adjust as per liking */
@media screen and (min-width: 1200px) {
.has-site-logo .main-navigation>div {
    top: -100%;
  }
}
  • Unknown's avatar
    melanieianderson · Member ·

    Hi ehtis,

    Thank you for this – I tried and it didn’t work unfortunately. The menu is still right aligned and on 2 lines. Any other ideas?

    Thanks!
    Melanie

  • ehtis · Staff ·

    Melanie, that’s interesting — I tried in Chrome and Firefox, worked fine in both.

    Might have to do with the order of code. Where did you paste it? At the end or at the top? Both of the above selectors were apparently already present in your custom CSS code section.

    Two options now, either modify the existing code which has top currently set as 50%, and .media-navigation’s max-width as 50%. (remove the snippet I posted above.)

    OR, copy/paste this at the end:

    @media screen and (min-width: 1200px) {
.main-navigation {
    max-width: 100%;
   }
}

@media screen and (min-width: 1200px) {
.has-site-logo .main-navigation>div, .has-site-logo .main-navigation>ul {
    top: -100%;
   }
}

    Let us know how it works out.

  • Unknown's avatar
    melanieianderson · Member ·

    Hi!

    That worked by putting it at the end – thanks so much! :) However, viewing the page on a computer screen (mobile is all good), now there is a ton of space underneath the menu/logo before getting to the content of the page. Is there any way to reduce that space? I can start a new thread to address that if that would be best.

    Thanks for your help!
    Melanie :)

  • ehtis · Staff ·

    Great! And I think we’ll just address it here. This will clear up that empty space:

    @media screen and (min-width: 1200px) {
.has-site-logo .main-navigation {
    margin-bottom: -80px;
    }
}
  • Unknown's avatar
    melanieianderson · Member ·

    Woohoo! It totally worked. Thank you so much!! :)

    Melanie

  • ehtis · Staff ·

    Not a problem, glad it worked! :)

  • The topic ‘Sketch Theme Custom CSS Mobile Menu Location’ is closed to new replies.