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

rsmith3074

Question

  • Answers 42
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

Hey @rsmith3074 - I realize you posted this weeks ago but I just now got back onto the forum and wanted to share the answer in case you still needed it! I use CSS to do this; this code does the trick

You can replace burger icon with custom three lines (here is an example img) Add to Home > Design > Custom CSS. Replace current image with three lines icon url .burger-box div { dis

Hey @tuanphan and @inside_the_square How can we add other styling details, such as changing the background colour and aligning the text left, changing the line spacing and text colour? I've

Posted Images

Recommended Posts

  • 1
On 6/20/2020 at 2:10 PM, Asiya said:

@tuanphan 

 what if i want the humberger sign to have three lines? this code produces two lines humberger. 

 
  •  

You can replace burger icon with custom three lines (here is an example img)

Add to Home > Design > Custom CSS. Replace current image with three lines icon url

.burger-box div {
    display: none;
}
.burger-box {
    background-image: url(https://static.thenounproject.com/png/3143942-42.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
}

 

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
  • 1
4 hours ago, bonniergcuk said:

sorry, thank you

dolphinbottles.co.uk password: dolphin

 

apologies!

Add to Home > Design > Custom CSS

.header-display-desktop .header-actions.header-actions--right {
    visibility: visible !important;
}

 

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

Hey @rsmith3074 - I realize you posted this weeks ago but I just now got back onto the forum and wanted to share the answer in case you still needed it! I use CSS to do this; this code does the trick for me. Hope it helps! 

 

.header-burger { display:flex!important}
.header--menu-open .header-menu {opacity: 1!important;visibility: visible!important;}
.header-nav, .header-actions {visibility:hidden!important}

 

 

Code queen and CSS behind InsideTheSquare.co

😃 Free CSS tutorials: insidethesquare.co/tutorials-for-squarespace
🥳 Free 7.1 training course: itssevenone.com/training
👍 CSS Cheat Sheet - codes for 7 & 7.1: insidethesquare.co/css
📚 CSS for Squarespace course: customcodeacademy.com

Link to post
  • 0
On 2/7/2020 at 5:50 PM, inside_the_square said:

Hey @rsmith3074 - I realize you posted this weeks ago but I just now got back onto the forum and wanted to share the answer in case you still needed it! I use CSS to do this; this code does the trick for me. Hope it helps! 

 


.header-burger { display:flex!important}
.header--menu-open .header-menu {opacity: 1!important;visibility: visible!important;}
.header-nav, .header-actions {visibility:hidden!important}

 

 

Hi! Inside the square, I love your yourtube channel. I use this CSS code. How do I center the logo afterwards? I tried the "Edit Site Header" but I get this ( see image)

788015434_ScreenShot2020-03-02at6_37_12PM.thumb.png.b2b7a2574603731f8df64d4135ca413e.png

Link to post
  • 0
On 2/8/2020 at 8:50 AM, inside_the_square said:

Hey @rsmith3074 - I realize you posted this weeks ago but I just now got back onto the forum and wanted to share the answer in case you still needed it! I use CSS to do this; this code does the trick for me. Hope it helps! 

 


.header-burger { display:flex!important}
.header--menu-open .header-menu {opacity: 1!important;visibility: visible!important;}
.header-nav, .header-actions {visibility:hidden!important}

 

 Hey inside_the_square do you know how to make the hamburger menu display on the right hand side instead of left using this CSS in Squarespace 7.1?

When I currently shrink the browser window the hamburger is jumping from the left to the right so I just need it on the right the whole time please. 

 

Link to post
  • 0
On 2/7/2020 at 2:50 PM, inside_the_square said:

@inside_the_square

Thanks so much for sharing! When I do as you suggested, it pushes the logo to strange spots in the header (as it did with others). In my case, the logo is meant to be centered. Any ideas on that? Would also LOVE to move the hamburger to the right side if anybody knows how to do that. 


.header-burger { display:flex!important}
.header--menu-open .header-menu {opacity: 1!important;visibility: visible!important;}
.header-nav, .header-actions {visibility:hidden!important}

 

 

 

Screen Shot 2020-05-03 at 10.11.14 AM.png

Link to post
  • 0
On 3/26/2020 at 6:20 PM, nancydesign said:

Hey @tuanphan and @inside_the_square

How can we add other styling details, such as changing the background colour and aligning the text left, changing the line spacing and text colour?

I've tried adding things like background: #ffffff; but nothing is changing!

I have a similar issue to @nancydesign I think. I can't work out how to control the background colour of the hamburger navigation. My white logo gets lost on the white background. 

image.thumb.png.d414c1e0147d2d1e6892cce4f9cd6a0b.png

 

Link to post
  • 0
Posted (edited)

@MartyMeh To style on  version 7.1.

Link Alignment:

.header-menu-nav {text-align: left!important; margin-left: 15%!important;}

Page Background color:

.header-menu-bg {background: red!important;}

Add image as background to Page: (replace with your image.)

.header-menu-bg {background-image: url('https://static1.squarespace.com/static/5e04314e1e03733084a0d51a/t/5ece9831d9f131439a22411a/1590598888064/Cork-City-Centre-at-Night.png'); 
  background-repeat: no-repeat;
  background-size: cover;}

Space between links:  

.header-menu-nav-item {line-height: 20px!important;}

Link text :
.header-menu-nav-item > a {color: green!important;}

 

Floating header is set in the Header Edit option. Select Style > and toggle to Fixed. 

- John

Edited by JOHNMD

mcgouran.john@gmail.com

Link to post
  • 0

So if I wanted a hamburger menu across all devices on the left side and my logo fixed in the center, what would the code be?  Header Edit --> Style --> Fixed does not address the issue of the floating logo with the current CSS code.  The current CSS breaks the existing centered logo when "fixed" is toggled on.  Thanks.

Link to post
  • 0
On 6/20/2020 at 2:10 PM, Asiya said:

@tuanphan 

 what if i want the humberger sign to have three lines? this code produces two lines humberger. 

 
  •  

You can replace burger with three lines icon

 Add to Home > Design > Custom CSS

.burger-box div {
    display: none;
}
.burger-box {
    background-image: url(https://image.flaticon.com/icons/svg/876/876207.svg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
}

 

 

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 6/20/2020 at 2:10 PM, Asiya said:

@tuanphan 

 what if i want the humberger sign to have three lines? this code produces two lines humberger. 

 
  •  

 Add to Home > Design > Custom CSS

.burger-box div {
    display: none;
}
.burger-box {
    background-image: url(https://image.flaticon.com/icons/svg/876/876207.svg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
}

 

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 2/7/2020 at 4:50 PM, inside_the_square said:

Hey @rsmith3074 - I realize you posted this weeks ago but I just now got back onto the forum and wanted to share the answer in case you still needed it! I use CSS to do this; this code does the trick for me. Hope it helps! 

 


.header-burger { display:flex!important}
.header--menu-open .header-menu {opacity: 1!important;visibility: visible!important;}
.header-nav, .header-actions {visibility:hidden!important}

 

 

Hi! How can I show the social media icons afterwards? They seem to dissappear.

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