Sketch theme – single line menu

  • leavenhall · Member ·

    Hi,
    How do I make the menu on the Sketch theme become a hamburger after 1200px rather than 1280px so that on a small lap top it appears as as a single line menu but reverts to a hamburger menu when viewed on a tablet or phone?
    I’ve added CSS as advised on other threads similar to this one so can get it as a line menu but for all devices – I only want to change the 1280px to 1200px.
    Any help would be much appreciated.

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

  • thesacredpath · Member ·

    Hi, this would be a pretty tall order. I see that you have figured out how to get the desktop-style menu to stay visible at all screen widths.

    To change the breakpoint, first off you would have to reverse the navigation associated stuff in the 1280px media query and then reproduce the menu stuff in a 1200px media query.

    Is what you have right now going to work for you?

  • leavenhall · Member ·

    No ideally I would like the hamburger style menu to appear when viewing on a smaller screen such as a tablet or phone and the horizontal menu to appear on a non-mobile device that has a smaller screen such as my 13″ laptop.

    I tried to identify the coding for the navigation using Firebug but I just couldn’t find it :(.
    Thanks ever so much for your help.

  • thesacredpath · Member ·

    Ok, this is a bit of a “hack” but it is far easier than trying to reverse the min-width 1281 rule and create the 1200 rule.

    First off, remove the CSS you added to make the toggle and everything disappear and get the menu back to how it worked originally. Then add the following to the very bottom of your custom CSS. 

    @media screen and (min-width: 1200px) {
.menu-toggle {
    display: none;
}
.site-logo {
    max-height: 100px;
}
.has-site-logo .main-navigation {
    height: 100px;
}
.has-site-logo .main-navigation > div, .has-site-logo .main-navigation > ul {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}
.main-navigation {
    clear: none;
    float: right;
    font-size: 0.8125em;
    line-height: 2.09231em;
    max-width: 50%;
    text-align: right;
}
.main-navigation ul:first-child {
    display: block;
}
.main-navigation ul li {
    display: inline-block;
}
.main-navigation ul li:hover > ul, .main-navigation ul li.focus > ul {
    display: block;
    opacity: 1;
    transition: all 0.3s ease-in-out 0s;
    visibility: visible;
}
.main-navigation ul a {
    border-bottom: 0 none;
    padding: 5px 0 5px 14px;
}
.main-navigation ul ul {
    background: white none repeat scroll 0 0;
    border: 1px solid #eee;
    display: none;
    float: left;
    left: 0;
    opacity: 0;
    padding: 0 7px;
    position: absolute;
    text-align: left;
    top: 27px;
    transition: all 0.3s ease-in-out 0s;
    visibility: hidden;
    z-index: 99999;
}
.main-navigation ul ul li {
    border-bottom: 1px solid #eee;
    padding: 5px 5px 4px;
}
.main-navigation ul ul li:last-of-type {
    border-bottom: 0 none;
}
.main-navigation ul ul li a {
    line-height: 1.5;
    padding: 5px;
    width: 180px;
}
.main-navigation ul ul ul {
    left: 100%;
    top: 0;
}
.main-navigation ul ul li a, .main-navigation ul ul ul li a, .main-navigation ul ul ul ul li a {
    padding-left: 5px;
}
}
  • leavenhall · Member ·

    Fantastic stuff! Thank you so much for all this work. One very happy blogger here :).

  • thesacredpath · Member ·

    Awesome, and you are welcome!

  • The topic ‘Sketch theme – single line menu’ is closed to new replies.