Mobile Site Issues around Menu

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!

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;
}

worked great, thank you!!

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? 

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? 

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;
}

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!!