Reduce mobile nav size?

I'm demo-ing Squarespace...

How do I reduce the size of my navigation fonts on the mobile version?...

How do I reduce the size of the hamburger icon on mobile?

How do I move that hamburger icon to the left or right and get it closer to the edge and away from my logo?...

Is there a way to add the hamburger icon to the desktop version and put it on the right?...

Add to Home > Design > Custom CSS

How do I reduce the size of my navigation fonts on the mobile version?...

.header--menu-open .header-menu .header-menu-nav a {
    font-size: 10px;
}

How do I reduce the size of the hamburger icon on mobile?

.burger-box {
    width: 15px;
}

Thanks so much 🙂...

Although it does this weird thing when you close the icon - you see the text large again for split second!..

– Also, any way of adding a different logo version just for mobile?

– And is there a way of moving that hamburger icon further to the left?

– Is there a way of making the nav on the desktop version just a hamburger?

– Is it because of 7.1 that we need all this coding? Doesn't 7.0 allow you to change all this in the styling?

Font size I think you can find in Site Style.  or remove above/try this

.header-menu-nav a {
    font-size: 10px;
}

add logo, force burger on desktop you need to use code

On 3/31/2020 at 1:23 PM, tuanphan said:

Add to Home > Design > Custom CSS

How do I reduce the size of my navigation fonts on the mobile version?...

.header--menu-open .header-menu .header-menu-nav a {
    font-size: 10px;
}

How do I reduce the size of the hamburger icon on mobile?

.burger-box {
    width: 15px;
}

 

Hi,

I am having a similar problem with mine.

Can you help me with the coding for this and help me with having a gap in-between the logo and the navigation menu/button.

Thanks in advance, 

ARRON BURTON

1 hour ago, ARRONBURTON said:

H

 

Can you share link to your site?

50 minutes ago, tuanphan said:

Can you share link to your site?

Hi,

Thank you for your response. 

https://algae-cranberry-ecad.squarespace.com/

3 minutes ago, ARRONBURTON said:

Hi,

Thank you for your response. 

 

https://algae-cranberry-ecad.squarespace.com/

Add to Home > Design > Custom CSS

/* space between site title - burger */
@media screen and (max-width:767px) {
.header-title-logo {
    margin-right: 30px;
}
}

19 minutes ago, tuanphan said:

Add to Home > Design > Custom CSS

/* space between site title - burger */
@media screen and (max-width:767px) {
.header-title-logo {
    margin-right: 30px;
}
}

 

Thank you.

I also have a question about my homepage if you are able to answer - on my site I have a front page which is a full photo under DIRECTION.

Is there a way I can keep the DIRECTION page as my homepage and remove the button on the top of the page with the other buttons entitled AUTHORITY, WORK, INFO, and 001?

Thank you for your time, I do appreciate it. 

2 minutes ago, ARRONBURTON said:

Thank you.

 

I also have a question about my homepage if you are able to answer - on my site I have a front page which is a full photo under DIRECTION.

Is there a way I can keep the DIRECTION page as my homepage and remove the button on the top of the page with the other buttons entitled AUTHORITY, WORK, INFO, and 001?

 

Thank you for your time, I do appreciate it. 

Add to Home > Design > Custom CSS

.homepage .header-nav-item:not(:first-child) {
    display: none;
}
.homepage .header-menu-nav-item:not(:first-child) {
    display: none;
}

6 minutes ago, tuanphan said:

Add to Home > Design > Custom CSS

.homepage .header-nav-item:not(:first-child) {
    display: none;
}
.homepage .header-menu-nav-item:not(:first-child) {
    display: none;
}

 

Hi,

Unfortunately nothing changes it still remains.

Thanks,

5 minutes ago, ARRONBURTON said:

Hi,

 

Unfortunately nothing changes it still remains.

 

Thanks,

 

 

Remove code in Line 1 - Line 2 in Custom CSS box > Save

No problem!

Is there any way I can get rid of the underlines on the navigation buttons?

Thank you again. 

6 minutes ago, ARRONBURTON said:

No problem!

 

Is there any way I can get rid of the underlines on the navigation buttons?

 

Thank you again. 

Add to Home > Design > Custom CSS

header#header a {
    background-image: none;
}

13 minutes ago, ARRONBURTON said:

Hi,

 

Unfortunately nothing changes it still remains.

 

Thanks,

 

 

Add to Home > Settings >Advanced > Code Injection > Header

<style>
  .homepage .header-nav-item:not(:first-child) {
    display: none;
}
.homepage .header-menu-nav-item:not(:first-child) {
    display: none;
}
</style>

On 3/31/2020 at 9:23 AM, tuanphan said:

Add to Home > Design > Custom CSS

How do I reduce the size of my navigation fonts on the mobile version?...

.header--menu-open .header-menu .header-menu-nav a {
    font-size: 10px;
}

How do I reduce the size of the hamburger icon on mobile?

.burger-box {
    width: 15px;
}

 

I tried all in this website :

https://cod-herring-kdsb.squarespace.com/

Password to view it is : 123

Added all codes here, but in the admin mobile ss panel it works, when I save it , I go to the mobile and the navigation is huge ( and one item divides into two pages ) 

Do you know what can it be ?

Thanks 

17 hours ago, zerosite said:

I tried all in this website :

https://cod-herring-kdsb.squarespace.com/

 

Password to view it is : 123

Added all codes here, but in the admin mobile ss panel it works, when I save it , I go to the mobile and the navigation is huge ( and one item divides into two pages ) 

Do you know what can it be ?

Thanks 

Add to Home > Design > Custom CSS

/* mobile nav item size */
.container.header-menu-nav-item a {
    font-size: 10px;
}

hi @tuanphan

Just wondering if you can help me too - when displaying on a mobile view, I'm wanting to move the hamburger icon and search icon closer to the edge of the screen, and still have my logo centered. I've tried loads of different code options but can't seem to figure it out... my website is www.stampdesignco.com and access password is spaceform1

Thanks 🙂

3 hours ago, Emma456 said:

hi @tuanphan

Just wondering if you can help me too - when displaying on a mobile view, I'm wanting to move the hamburger icon and search icon closer to the edge of the screen, and still have my logo centered. I've tried loads of different code options but can't seem to figure it out... my website is www.stampdesignco.com and access password is spaceform1

Thanks 🙂

Add to Home > Design > Custom CSS

.Mobile-bar.Mobile-bar--top {
    padding-left: 15px;
    padding-right: 15px;
}

@tuanphan Thank you so much!! Thank worked! Also another quick question - is it possible to get my hamburger menu and search icon to display as black on every other page aside from my homepage (where it's white?) Thanks!

19 hours ago, Emma456 said:

@tuanphan Thank you so much!! Thank worked! Also another quick question - is it possible to get my hamburger menu and search icon to display as black on every other page aside from my homepage (where it's white?) Thanks!

body:not(.homepage) {
svg.Icon.Icon--hamburger {
    stroke: black;
}
svg.Icon.Icon--search {
    stroke: black;
}
}

Hi guys (@tuanphan)

I’ve reduced the size (width) of the hamburger menu on the site I’m working through.

Is it possible to reduce the height (ie. space between the lines) too?

Thanks in advance 🙃

On 11/7/2020 at 12:52 AM, CASKATE said:

Hi guys (@tuanphan)

I’ve reduced the size (width) of the hamburger menu on the site I’m working through.

Is it possible to reduce the height (ie. space between the lines) too?

 

Thanks in advance 🙃

 

Yes. Possible. Can you share site url? We can help easier

Great! Thank you, appreciate it.





 

On 11/13/2020 at 1:17 PM, CASKATE said:

Great! Thank you, appreciate it.

https://viola-seahorse-l65k.squarespace.com/config/

pass: RosRosRos
 

Add to Home > Design > Custom CSS

.burger-inner.header-menu-icon-tripleLineHamburger .top-bun {
    transform: translatey(-6.5px);
}
.burger-inner.header-menu-icon-tripleLineHamburger .bottom-bun {
    transform: translatey(5.5px);
}

Worked perfectly thanks!