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

7.1 Mobile Menu Header/Logo Design & Styling

Question

Hi, I am trying to style the mobile menu on a new site in 7.1. Wow, very frustrating that this is not an option!

First, I am just confused where the default styles are inherited from.

Second, I have figured out how to change the background color of the middle and bottom portions of the mobile menu with custom CSS, but I have not had success changing the top header piece (I ultimately want the whole background of the menu to be completely blue #2f4e98, with white type and the button as is).

Third, is it possible to specify a different logo (full color) for mobile if I were to stick with the cream background?

Site is live at: https://rootds.com

Thanks!
Melissa

Edited by melmotz
added logo question

Share this post


Link to post

4 answers to this question

Recommended Posts

  • 0

Second. Add to Home > Design > Custom CSS

.burger-inner:after {
    background: red !important;
}
.burger-inner:before {
    background: green !important;
}

Third, you can use CSS to do this. Can you share link to new logo?


Send me a message if you have any questions (free 10 minutes)

Free code: Squarespace 7.0 (4000+ code)

Learn CSS Basic: Treehouse - W3Schools - Flexbox

Other groups: SS Customization Resource Group - SS CSS Support - SS Community

 

Share this post


Link to post
  • 0

Tuanphan,

Thank you for your help!! I added that, but I believe it just changed the menu icon color. I prefer the white hamburger on the homepage, but left as is so you can see. I think I'm looking to change .header-announcement-bar-wrapper dark but when I try to use that in the CSS, it doesn't work.

Thanks!

Edited by melmotz

Share this post


Link to post
  • 0

I think I got this to work by adding the following custom CSS:

For the header background color:

@media screen and (max-width:640px) {.tweak-transparent-header .header .header-announcement-bar-wrapper:not(.shrink):not(.transparent-header-theme--override) {
background-color: #2f4e98 !important; 
 
}
}

For the bottom piece with CTA button:

.header-menu-cta {
  background-color: #2f4e98; 
}

For the middle section with Nav items:

.header-menu-nav-folder-content {
  background-color: #2f4e98; 
}

And to change the hamburger/X icon colors:

.burger-inner:after {
    background: #fff !important;
}
.burger-inner:before {
    background: #fff !important;
}

Edited by melmotz

Share this post


Link to post
  • 0

That seemed to work on the preview, but doesn't hold up when saved, the mobile header bar is still the cream color, so I reverted back. Any other thoughts on how to tackle that mobile menu header so that it is solid blue on mobile, but doesn't affect the transparency on desktop?

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