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

Reduce mobile nav size?


mportch

Question

I'm demo-ing Squarespace...

How do I reduce the size of my navigation fonts on the mobile version?...
641223074_ScreenShot2020-03-31at10_56_56pm.png.08d7c2ca49a346e4e30bd3b236da8004.png

 

 

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

305534342_ScreenShot2020-03-31at10_54_49pm.png.ba07535c093ecbac66be9c7ce97711be.png

 

 

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

1564856790_ScreenShot2020-03-31at10_57_57pm.thumb.png.96b4df09fc41165176f559fd497fc2e2.png

Link to post
  • Answers 26
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

Can you share link to your site?

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

Add to Home > Design > Custom CSS .burger-inner.header-menu-icon-tripleLineHamburger .top-bun { transform: translatey(-6.5px); } .burger-inner.header-menu-icon-tripleLineHamburger .botto

Posted Images

Recommended Posts

  • 0

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

 

You can send your question to my email to get detail answer. / How to Setup Password & Share URL 

-- Pour your heart into it

Link to post
  • 0

Thanks so much 🙂...
1599588045_ScreenShot2020-03-31at11_38_41pm.png.e9702a08f3543788650d40e141d6b376.png

 

Although it does this weird thing when you close the icon - you see the text large again for split second!..
1664436653_ScreenShot2020-03-31at11_32_31pm.png.12f1b7c54211bd6af12980040993f6fc.png

 

– 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?
1822456836_ScreenShot2020-03-31at11_34_52pm.png.510c6b053001fb4e3eb50b3d531ebe8b.png

 

 

– 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?

 

 

Link to post
  • 0
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

IMG_1695.PNG

Link to post
  • 0
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;
}
}

 

You can send your question to my email to get detail answer. / How to Setup Password & Share URL 

-- Pour your heart into it

Link to post
  • 0
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. 

Link to post
  • 0
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;
}

 

You can send your question to my email to get detail answer. / How to Setup Password & Share URL 

-- Pour your heart into it

Link to post
  • 0
Posted (edited)
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,

 

Screen Shot 2020-05-02 at 14.57.34.png

Edited by ARRONBURTON
Link to post
  • 0
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>

 

You can send your question to my email to get detail answer. / How to Setup Password & Share URL 

-- Pour your heart into it

Link to post
  • 0
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 

Link to post
  • 0
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;
}

 

You can send your question to my email to get detail answer. / How to Setup Password & Share URL 

-- Pour your heart into it

Link to post
  • 0

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 🙂

Link to post
  • 0
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;
}

 

You can send your question to my email to get detail answer. / How to Setup Password & Share URL 

-- Pour your heart into it

Link to post
  • 0

@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!

Link to post
  • 0
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;
}
}

 

You can send your question to my email to get detail answer. / How to Setup Password & Share URL 

-- Pour your heart into it

Link to post
  • 0

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 🙃

 

 

Screenshot 2020-11-06 at 17.48.06.png

Edited by CASKATE
Link to post
  • 0
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

You can send your question to my email to get detail answer. / How to Setup Password & Share URL 

-- Pour your heart into it

Link to post
  • 0
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);
}

 

You can send your question to my email to get detail answer. / How to Setup Password & Share URL 

-- Pour your heart into it

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