flatiron mobile heading & navigation spacing issues

I am using the Flatiron template, and this is my site: www.isissakomadajohn.com

I have a few issues with my header in mobile:

1. I would like the navigation (currently denoted by "menu") to appear below the logo instead of on top
2. I would like the navigation to say "+" instead of "menu"
3. Once the navigation is clicked to open, I would like the navigation items to be less spaced out in terms of line height. they currently take up the entire screen on my iPhone 7 plus
4. Once the logo and navigation are reversed, I would like less space between the logo and the top of the page, and between the navigation and the first item in my scrolling index

I am having two issues with my footer too:

1. On mobile, when you scroll all the way to the bottom of the index and reach the footer, the social icons are slightly off center
2. On mobile, when you scroll all the way to the bottom of the index and reach the footer, there is a ton of space between the last image in the index and the social icons. I'd like to decrease this amount of space

Many thanks in advance!

Isissa

Too many problems on 1 post..

1. Logo (top) - Menu (bottom)

Add to Home > Design > Custom CSS

header#topBar {
    display: flex;
    flex-direction: column-reverse;
}

Ok, thank you I will repost other questions separately. 

For logo on top and menu on bottom, I only want this for mobile. I am happy with it how it was on desktop.

Thanks!

34 minutes ago, isissa said:

Ok, thank you I will repost other questions separately. 

For logo on top and menu on bottom, I only want this for mobile. I am happy with it how it was on desktop.

Thanks!

okay, remove the above code and use this

@media screen and (max-width:640px) {
header#topBar {
    display: flex;
    flex-direction: column-reverse;
}
}

If you post too many problems in one post, it will be difficult for you to get an answer. Almost like these questions I see on the forum, no one answered.
In case you don't want to spend a lot of time posting, you can hire someone here, for example Paul2009, christyprice colin.irwin, ... or see my service. 😷

Awesome that worked @tuanphan - thank you! And I appreciate the advice!

@tuanphan -- Actually, now the menu doesn't open on mobile. It is in the correct place but is no longer a link -- its just text there.

6 minutes ago, isissa said:

@tuanphan -- Actually, now the menu doesn't open on mobile. It is in the correct place but is no longer a link -- its just text there.

Seems fine here..

2. I would like the navigation to say "+" instead of "menu"

#mobile-navigation #mobile-navigation-label:after {
    content: "+";
    font-size: 50px;
}

thank you @tuanphan! is there a way to have the word menu not appear once you click the "+" ?

8 minutes ago, isissa said:

thank you @tuanphan! is there a way to have the word menu not appear once you click the "+" ?

 

Remove above code, and use this

#mobile-navigation #mobile-navigation-label:after, #mobile-navigation.sqs-mobile-nav-open #mobile-navigation-label:after {
    content: "+";
    font-size: 50px;
}

I'm still having trouble with the menu not opening. it works fine when it is positioned above my logo, but with the code to have it below by logo it doesn't click. it doesn't work on my actual iPhone.

On 1/1/2020 at 8:44 AM, isissa said:

I'm still having trouble with the menu not opening. it works fine when it is positioned above my logo, but with the code to have it below by logo it doesn't click. it doesn't work on my actual iPhone.

Try adding this code to Home > Design > Custom CSS

@media screen and (max-width:640px) {
header#topBar {
	display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex-direction: column-reverse;
}
}