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

Posted Images

19 answers to this question

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 faster answer. / How to Setup Password & Share URL 

-- I'm Tuan, work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. 

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

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

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

-- I'm Tuan, work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. 

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
1 hour ago, ARRONBURTON said:

H

 

Can you share link to your site?

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

-- I'm Tuan, work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. 

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 faster answer. / How to Setup Password & Share URL 

-- I'm Tuan, work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. 

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 faster answer. / How to Setup Password & Share URL 

-- I'm Tuan, work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. 

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

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

-- I'm Tuan, work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. 

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 faster answer. / How to Setup Password & Share URL 

-- I'm Tuan, work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. 

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 faster answer. / How to Setup Password & Share URL 

-- I'm Tuan, work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. 

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 faster answer. / How to Setup Password & Share URL 

-- I'm Tuan, work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. 

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 faster answer. / How to Setup Password & Share URL 

-- I'm Tuan, work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. 

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