mobile menu at top

Home Forums Reykjavik mobile menu at top

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #18908

    oakhillman
    Participant

    mobile menu at top

    Resolved

    Oliver,

    I know this is kind of a big ask, but can we move the mobile menu to the top? I attached a mockup to show you what I mean.

    The reason I ask is because I think people look for it to be at the top and sometimes I think they don’t even see it at the bottom.

    Thanks,
    Mark

    #18909

    Oliver Juhas
    Keymaster

    Hi Mark,

    Your image was not attached due to exceeded file size. However, please try this custom CSS to move the mobile navigation to top:

    @media only screen and (max-width: 41.9375em) and (min-height: 28em) {
    
    	.menu-toggle {
    		top: -1rem;
    		bottom: auto;
    		padding-top: .62em;
    		padding-bottom: 0;
    	}
    
    	.has-navigation-mobile .site-footer > div:last-child {
    		margin-bottom: 0;
    	}
    
    	.has-navigation-mobile .site {
    		margin-top: 3.62rem;
    	}
    
    }

    Best regards,

    Oliver Juhas
    WebMan Design

    #18910

    oakhillman
    Participant

    I attached a smaller version so that folks looking to do the same thing can clearly see what your CSS does. And the CSS you provided works perfectly, of course.

    I just sent you a donation and as usual I encourage others to donate as well. Here’s the link.

    https://www.paypal.me/webmandesign/20

    Thank you Oliver!

    Mark

    Attachments:
    You must be logged in to view attached files.
    #18912

    Oliver Juhas
    Keymaster

    You’re just awesome, Mark! Thank you! :)

    Best regards,

    Oliver Juhas
    WebMan Design

    #19072

    presh
    Participant

    I have tried it but its not working

    #19074

    Oliver Juhas
    Keymaster

    Hi presh,

    The custom CSS solution should work just fine. Please make sure you apply it according to instructions found in “YOU MIGHT BE INTERESTED…” section of my replies.

    If it still doesn’t work for you, please provide your website URL so I can have a look personally and advise you.

    Best regards,

    Oliver Juhas
    WebMan Design

    #19075

    oakhillman
    Participant

    @presh, I’ve applied it to several of my websites using Reykjavik and it works perfectly. There is one thing I now remember, when you copy and paste the code make sure the > symbol copies without turning into something other than the symbol. I’ll bet Oliver knows what I’m talking about and can fill us in with the right terms for it.

    #19076

    Oliver Juhas
    Keymaster

    Good catch, Mark! Thanks for mentioning this.

    Indeed, depending on your computer’s operating system, the way of pasting the copied code (paste normally or as a plain text) and possibly even a browser you use, the > character may have been changed into HTML entity (such as “>” or “>”).

    Really the only fix in such case is to overwrite the pasted HTML entity with proper > and it should work just fine then.

    Best regards,

    Oliver Juhas
    WebMan Design

    • This reply was modified 2 months, 1 week ago by  Oliver Juhas.
Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.