Jump to content

Big Logo & Mobile Nav

Recommended Posts

Site URL: http://www.restaurantayla.com

Hello,

I am working on a site design for a new restaurant, I am stuck on 2 different levels, here are my questions :

1) How can I make the AYLA logo, go from side to side of the screen, full width?

2) Regarding the mobile navigation, is there a way to disable the mobile hamburger nav and just keep the same as the desktop version? but stacked?

restaurantayla.com

Password is "ayla"

 

I am on Squarespace 7.1

 

Thanks in advance!

Link to comment
  • Replies 10
  • Views 667
  • Created
  • Last Reply

1. Add to Home > Design > Custom CSS

[data-section-id="5e5e874c0286e7703c115072"] .content-wrapper .content {
    width: 100% !important;
}

2. 

force desktop navigation on mobile: difficult & time-consuming. Hope someone will share the code.
yesterday a client asked me this and i said it was difficult, time consuming and charged $30

If you want to disable burger icon, I can give the code ✌️

 

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Another question regarding that Homepage logo, how do I make sure the landing always displays the AYLA name at the bottom? I just noticed that on a laptop, the AYLA name is completely cut off. Is there a way to force the visibility of that section no matter the size of the viewport?

 

Thanks!

Link to comment

Use this 

12 hours ago, Guigo said:

The code to force Desktop nav on Mobile, didn't you say you knew how to achieve that?

12 hours ago, Guigo said:

Another question regarding that Homepage logo, how do I make sure the landing always displays the AYLA name at the bottom? I just noticed that on a laptop, the AYLA name is completely cut off. Is there a way to force the visibility of that section no matter the size of the viewport?

 

Thanks!

image.thumb.png.9b06bff7321f46b0564ea3ce402f89f0.pngSeems fine here?

 

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 4 months later...
On 3/27/2020 at 6:36 PM, tuanphan said:

Hi, I too need to make our site logo the width of the screen (www.braveryonfire.com) - ideally the logo will be on top centered across the width of the screen, with the nav menu links centered on a single line below the logo. I tried this:

 

Quote

1. Add to Home > Design > Custom CSS


[data-section-id="5e5e874c0286e7703c115072"] .content-wrapper .content {
    width: 100% !important;
}

 

... but it didn't work. Is it because the section-id is site-specific? How do I find our unique section-id for our header logo? Thank you!!

Meredith Tarr

Link to comment
1 hour ago, mpressmeredith said:

 

... but it didn't work. Is it because the section-id is site-specific? How do I find our unique section-id for our header logo? Thank you!!

Meredith Tarr

Can you share site url? We can check easier.

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 3 months later...
On 12/18/2020 at 9:03 AM, one27mediahouse said:

I see that on http://www.restaurantayla.com/ you managed to get it accomplished!  How did you do this? 

I've been trying to figure this out for so long, but all of the answers are only for the reversed effect.  I too am looking to force a desktop navigation bar on mobile, not the other way around.

Try adding to Home > Design > Custom CSS

@media screen and (max-width:767px) {
.header-display-desktop {
    display: flex !important;
}
.header-display-mobile {
    display: none !important;
}
.header-burger {
    display: none;
}
.header-title-nav-wrapper {
    flex: 1 0 100% !important;
}
.header-nav {
    display: flex !important;
    width: 70% !important;
    flex: 1 1 70% !important;
}
.header-title {
    flex: 1 0 30% !important;
}
}

 

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Archived

This topic is now archived and is closed to further replies.

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