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

Mobile Header Navigation - Hides Social Icons

Question

Site URL: https://www.birdmafia.com

Site URL: https://www.birdmafia.com

All,

looking for ideas on what options I have to make the mobile header better. Everything looks great on desktop, but in mobile it makes the social icons hidden until you hit the "..." icon, and it has the shopping bag further over to the left for no apparent reason.  Any ideas on how to make social icons show on top with shopping bag instead of hidden by "..." or if not an option at all     then how to hide the social icons on mobile.  Those are the two ideas I had.

Let me know what you think.

I have this code in to resize the mobile social icons, I tried making them even smaller - it never moved them to top. Just smaller to see once you hit the "..."

//social icon resize in mobile//
@media screen and (max-width:768px) {
.tweak-show-social-in-header .mobile-social .sqs-template-social-icons .sqs-svg-icon--wrapper {
    width: 30px;
}
}

1574559108_Screenshot2020-06-12at9_50_37PM.thumb.png.49bcb3ec3b8e802be80b54a1c7212e2e.pngimage1.png.5f4149565eb2943837907f311c158c48.png769309712_image0(1).thumb.png.c2ff044231dff3a8621ad08908294be6.png

Share this post


Link to post

5 answers to this question

Recommended Posts

  • 0

To hide icons, add to Home > Design > Custom CSS

div#socialEllipsisMobile {
    visibility: hidden;
}

 


You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan. I work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. There are so many questions every day so I can't answer them all at once, I will try to answer them in the next few days.

Share this post


Link to post
  • 0

@tuanphan that worked with no issues.  Any ideas if it's possible to right justify the "shopping bag?"  Just seems strange squarespace would automatically make it float in a random space on mobile responsiveness.  Here's what it looks like now:1410413997_image0(2).thumb.png.471206330f5177fb5b03361bb4d8a283.png

Share this post


Link to post
  • 0

Add to Home > Design > Custom CSS

/* align right mobile header cart icon */
.search-cart--mobile.flex-item {
    justify-content: flex-end;
}

 


You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan. I work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. There are so many questions every day so I can't answer them all at once, I will try to answer them in the next few days.

Share this post


Link to post
  • 0

@tuanphan thanks again as always!  I've decided to right justify that icon, and just take go ahead and leave the "..." that turn into social icons on mobile. I'd much rather have them up top, but can't seem to get that to work out.

Share this post


Link to post
  • 0

You need to use JavaScript to replace .... with social icons, it is complex, because after moving, you will need to use code to adjust the width and padding of the header elements.

I have saved questions, will check back after answering easy questions on the forum.


You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan. I work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. There are so many questions every day so I can't answer them all at once, I will try to answer them in the next few days.

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