Jump to content

Mobile Logo & Nav Issues

Go to solution Solved by tuanphan,

Recommended Posts

Greetings All 😀

I just did a soft launch, next week begins the full launch.

First, the problems. On mobile, my logo icon is broken (works fine on desktop and notepad), and my mobile menu is unreadable (as seen in the screenshot). How to fix the icon on mobile, and how to get the font to turn to black? 

Styling. How do I get that font a wee bigger and one weight up? 

I would like to a full width banner above the header on all pages to promote my substack which I launch, formally, in about a week. Is that possible? If so, how? 

You are all gods and your help and time are greatly appreciated. 

Thanks,
Bobby

Link to the site: https://creatorstruenorth.com/

Screenshot 2023-10-22 at 8.37.46 AM.png

Link to comment

With logo

You try edit Header > Upload a logo here

image.thumb.png.1861b00f88fb804f4584e8a64cf21c68.png

Mobile Menu Link Color

I remember header will inherit style of First Section, so you can try edit First section > Check theme color

Or add this to Website Tools (under Not Linked) > Custom CSS
 

/* Mobile menu item color */
div.container.header-menu-nav-item * {
    color: black !important;
}

Fullwidth banner

You can edit each page > Add it

Or you want to find another faster way to do this for all pages?

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

Hey @tuanphan  that solved all the problems. I didn't know there was a separate mobile logo upload, so that's on me, and the nav is now all black lettering. HUGE thank you! My last question is, on the slide out mobile nav, the vertical space. Is there code that will increase the vertical space between the links by 10%?  I also noticed the shopping cart the X to exit the mobile nav are yellow and barely visible. How to make those black?

You time and support always mean the world to me. Many thanks. 

IMG_8261.PNG

Edited by BobInAustin
more issues
Link to comment
  • Solution

With space between mobile menu links, you can use this CSS code

/* Mobile menu links space */
.header-menu-nav-item a {
    margin-top: 4.9vw !important;
    margin-bottom: 4.9vw !important;
}

With burger/cart icon use this CSS code

/* Overlay Menu Open - Burger - Cart */
body.header--menu-open span.Cart-inner {
    color: black !important;
}
body.header--menu-open .burger-inner>div {
    background-color: black !important;
}

 

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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.