Jump to content

Mobile Site Issues around Menu

Recommended Posts

Site URL: https://henryfrakesphotography.co.uk/

Hi everyone! 

Having a couple of issues with the site and could use some advise? 

  1. On mobile, ideally i would like the buger menu items to be slightly more spaced out, and evenly spaced as on the device currently it is uneven. 
  2. Ideally I would like the buger menu item a bit larger
  3. I was after the text to be bold
  4. Lastly, I'm not sure of it swiping in from the side and having a gap! I would liky it to fade in from the top and be full screen

Sorry, if anyone could help with any of the above that would be amazing!

 

Link to comment

Add to Design > Custom CSS

nav.Mobile-overlay-nav.Mobile-overlay-nav--secondary>button {
    padding-top: 0px !important;
}
.tweak-mobile-bar-menu-icon-hamburger .Mobile-bar-menu .Icon--hamburger {
    stroke-width: 2;
    width: 30px;
    height: 20px;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
4 hours ago, tuanphan said:

Add to Design > Custom CSS

nav.Mobile-overlay-nav.Mobile-overlay-nav--secondary>button {
    padding-top: 0px !important;
}
.tweak-mobile-bar-menu-icon-hamburger .Mobile-bar-menu .Icon--hamburger {
    stroke-width: 2;
    width: 30px;
    height: 20px;
}

 

thanks worked great! Just something I was wondering if you had any advise, I've done it but theres an issue with the main title text and cart on mobile, the text looks really small, and the cart quite far away from the burger menu. 

Is there a way to push the title onto two lines so the text could be bigger eg. 

henry frakes

photograhy

and is there a way to even the spacing between the left and right of the cart so its closer to the burger? 

image0.png

Link to comment
18 hours ago, HenryFrakes said:

thanks worked great! Just something I was wondering if you had any advise, I've done it but theres an issue with the main title text and cart on mobile, the text looks really small, and the cart quite far away from the burger menu. 

Is there a way to push the title onto two lines so the text could be bigger eg. 

henry frakes

photograhy

and is there a way to even the spacing between the left and right of the cart so its closer to the burger? 

image0.png

Add this CSS under

a.Mobile-bar-branding {
    visibility: hidden;
}
a.Mobile-bar-branding:before {
    content: "Henry Frakes";
    visibility: visible;
}
a.Mobile-bar-branding:after {
    visibility: visible;
    content: "Photography";
    display: block;
    margin-top: 10px;
    font-family: Arial,Helvetica,sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 18px;
    letter-spacing: 0em;
    line-height: .6em;
    text-transform: uppercase;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
11 hours ago, tuanphan said:

Add this CSS under

a.Mobile-bar-branding {
    visibility: hidden;
}
a.Mobile-bar-branding:before {
    content: "Henry Frakes";
    visibility: visible;
}
a.Mobile-bar-branding:after {
    visibility: visible;
    content: "Photography";
    display: block;
    margin-top: 10px;
    font-family: Arial,Helvetica,sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 18px;
    letter-spacing: 0em;
    line-height: .6em;
    text-transform: uppercase;
}

 

thank you!!

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.