Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
isissa

flatiron mobile heading & navigation spacing issues

Recommended Posts

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

header.png

footer.png

navigation.png

Share this post


Link to post

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!

Share this post


Link to post
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😷


You can send your question to my email to get faster answer.

How to Setup Password & Share URL - Free Templates - Free Code - CSS ID List

Share this post


Link to post
Posted (edited)
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..

image.thumb.png.08325ef08e5370774eb8a2c0782c42a4.png

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

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

 

Edited by tuanphan

You can send your question to my email to get faster answer.

How to Setup Password & Share URL - Free Templates - Free Code - CSS ID List

Share this post


Link to post
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;
}

 


You can send your question to my email to get faster answer.

How to Setup Password & Share URL - Free Templates - Free Code - CSS ID List

Share this post


Link to post

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.

Share this post


Link to post
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;
}
}

 


You can send your question to my email to get faster answer.

How to Setup Password & Share URL - Free Templates - Free Code - CSS ID List

Share this post


Link to post

Create an account or sign in to comment

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


×
×
  • Create New...