Big Logo & Mobile Nav

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!

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 ✌️

Hmmmm, ok great so what's the code? 🙂

Code for what?

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

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!

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!

Seems fine here?

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

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.

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.

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;
}
}