Search the Community
Showing results for tags 'navigation'.
-
Scrolling / Sticky Navigation Menu showing all White
michaelpga posted a question in Coding and Customization
Site URL: https://www.bloomhomes.com.au Hello, I am working with version 7.1 on site url - www.bloomhomes.com.au I have created a 'scrolling or sticky' menu to my navigation bar. The problem is, when it scrolls the colour of the menu goes completely white - how do I change the background of the nav bar to be light grey with the text appearing in white? Second problem, my drop-down nav links show all white too - can I change this to a transparent drop-down menu background and white text? Thank you in advance for your support! -
Site URL: https://raccoon-cymbals-g64s.squarespace.com/ Hi there, I've been trying to change the colours of the portfolio navigation text (please see screenshot). If not highlighted manually, the text would be the same colour as the background. Further, I've looked around and I can't tell which of the section themes would affect the colour of the navigation text (i.e. "next portfolio item"). Any help with this matter would be greatly appreciated. Thanks!
-
Vertical logo & different navigation style on landing page
ysong posted a question in Coding and Customization
Site URL: https://theharper.squarespace.com/ Hi! PW to site: theharpernyc A couple things I am trying to achieve using custom css that would appear only on the landing page: 1. Logo would be vertical and flush left. Would be responsive to the size of the window. 2. The navigation (will only have two pages linked) would be right above the vertical logo. I was able to flip the logo to it's side using this code: #header .header-title-logo { position: fixed; transform: rotate(90deg); background-color: white; padding:25px; } However I would like to make it full height and flushed left without cutting into the image. This is what I am trying to achieve: If anyone can help point me in the right direction of how to achieve this that would be amazing. Even if it's ideas. Thanks in advance! -
Site URL: https://cacao-death-by-xoko.squarespace.com/ password: xoko I've recreated the 7.0 Cacao template in 7.1. I want the cart icon in the center, as per the 7.0 demo, but I can't make it happen in 7.1. Can anyone work out the code? Thanks! Screenshots of Cacao demo 7.0 and my recreation in 7.1 attached.
-
Site URL: https://tmforwomen.squarespace.com/ Hello, I have used the below code to add icons next to a couple of secondary navigation links I have in my header. I would like to change the 'Australia' link to a folder in order to have some drop down options, however when I have tried to do so, the icons get all messed up. Please help and thank you 🙂 .Header-nav--secondary .Header-nav-inner { position: relative; margin-left: 0px!important; a:first-child:before { content: ''; width: 30px; height: 35px; position: absolute; background: url(https://static1.squarespace.com/static/604c1cc6a735435de1a89915/t/6115de1730ff665c4ccd1a61/1628823064550/trancendental-meditation-for-women-australia-08.jpg); margin-left: -35px; background-size: contain; top: 1px; } a:last-child:before { content: ''; width: 23px; height: 15px; position: absolute; background: url(https://static1.squarespace.com/static/604c1cc6a735435de1a89915/t/611626f4b2b060229a5c36cd/1628841716883/Australia_30_20_s+%281%29.png); margin-left: -33px; background-size: contain; top: 5px; } } This is my aim (Australia here is a link to another page - I want to change this part to a folder) Australia should be the flag icon. Icons should not be in the drop down.
-
Found a solution to my question
-
Site URL: https://tmforwomen.squarespace.com/ Hello, I have used the below code to add dividers between my main navigation. It works great but I want to hide the last one after 'contact' on the right. How do I do this? Thank you!! .Header-nav-item:after { content: "|"; margin-left: 15px; font-size: 1.4em; color: white; } -
Site URL: https://tmforwomen.squarespace.com/ Hello, I have used the below code to centre align my mobile navigation text. I would like to move the text down so it is aligned in the centre vertically also. Is there a way to do this? Many thanks :) // Center Mobile Text // .Mobile-overlay-nav-item, .Mobile-overlay-folder-item { text-align: center;} .Mobile-overlay-menu {width: 100%; z-index: 1;}
-
Site URL: https://seagroverehab.com We are using the Pacific template; I am having difficulty using CSS code I found in other threads to make the "Schedule a Discovery Call" in our top nav be a CTA button. Anyone know if it can be done and how? We don't have a secondary nav option that I've seen in some tutorials. If a button isn't possible, it is possible to have "Schedule a Discovery Call" in a different font color than the others using Code? (It isn't possible in Site Styles.) Thanks!
-
Hi There! I'm designing a very simple webpage using Wells. It's to promote a short documentary. What I would love to do is create a link in my navigation menu called "Credits". And when you click on this link, instead of being directed to a new page (with a text box containing all my credits), I would like the credits to appear on the webpage we're already on. It's fine if this looks a little crude or simple. I've attached a rough mockup of how I would like this to work. I'm a bit of a coding newbie. I don't suppose anyone can help me with coding this? Thank you so much! -
Site URL: https://www.lindsayamoroso.com/ So I have a couple things I am trying to accomplish for the mobile navigation: I am wanting the word menu to be a hamburger style menu. I am concerned if I do this, how will I get an X button to close the menu. I am wanting the hamburger to be right aligned and on the same line as the logo. I am wanting the navigation to be sticky when you scroll. Bonus: Custom color background for the expanded menu. Thanks!
-
Site URL: http://www.studiofurks.com I want to make the "Case Studies" link in the navigation bar an anchor link so it auto-scrolls the user to the white section when clicked on (portfolio grid items).
-
Site URL: https://www.danielromero.nyc/daniel-romero My business has two locations. I have created a landing page as my home page which allows the user to click into one area or the other which then takes them into either version of a full identical website under the same domain. Each of the two sites will have a homepage and navigation. I would like to have the navigation bar be different for each site and be able to decide which pages my navigation of choice will appear on. How can I make a custom navigation to show up on one page and a different navigation menu to show up on another page? -
Hi Guys, I am using a centred navigation (logo on the left, contact button on the right and menu items in the middle). Is there a way to prevent the navigation items from stacking as shown in this screen shot? Any help is greatly appreciated! I have researched options however havent been able to get anything to work. I'm using SquareSpace 7.1. Thanks!
-
Folder inside a folder (advanced dropdown nav)
thelifestylemanager posted a question in Coding and Customization
Site URL: https://www.vipbutlerservices.com/ Hi guys! I'm looking for a way to nest a folder inside a folder. For example: folder one with Car A B C then if you hover over Car A you see Diesel or Petrol. Anyone here that can help? -
Adjusting Images & Site Navigation for Mobile
IndigoBolt11 posted a question in Coding and Customization
Site URL: https://wrasse-buffalo-6zlc.squarespace.com/ Hi, I have small icons for images as desktop, but on mobile they look huge, is there a way to make the images smaller on mobile so they are not so overtaking? Also the site navigation text is so huge on mobile- is there a way to make it smaller? -
Site URL: http://touristtype.com Hi guys, I'm wondering if there is a quick and easy way to reduce the bottom padding on on my header, specifically and only on the mobile version. The spacing on the desktop version looks just fine, but when I switch between that and the mobile version, it's almost like the main content "jumps" down a small bit. I'll share an image here of what happens when I highlight my content in the Squarespace preview window, I assume the lower block is padding from the main content, which I think is fine, but there is also a larger padding or margin directly under the navigation that I think, if removed, would make it visually match the desktop version much better. I'm working on the 7.1 "template". Thanks for your help!
-
Hi, in 7.1 is it possible to have the logo centered in the header and all the navigation on the right side? Thanks!
-
Site URL: https://www.kwerling.com/ Hi all! Can someone help here? For my portfolio site, I wanted my logo to show on the left side of the top nav, and the two menu items to display on the far right, for balance. I found CSS on this forum to do exactly that, and it works great on the desktop and tablet versions of my site! The issue is that on mobile, it now displays both the default "menu" link above my logo, as well as the two items separately, right aligned underneath the logo. How do I adjust the CSS to display these two items, right aligned, only on desktop? And leave mobile as the default single menu item above the logo? ** Ideally, I would also replace the word "menu" with a hamburger icon on mobile, but I am fine settling with just removing the duplicate nav items, if that's much easier.** Here is the code I used that is working fine for desktop and tablet only: #navigator header#topBar ul#nav { display: block; float: right; } -
Stack and left justify logo and navigation SS7.1
elidagostino posted a question in Coding and Customization
Site URL: http://tricia-bennett-2.squarespace.com Password to site is "eli" You'll see that the nav and logo are currently centered. I'd like them both to left justify while stacked. Possible? Thanks in advance for help! Smiles from Martha's Vineyard, Eli -
Moving Account Login Element to Main Navigation Bar
officialbasics posted a question in Coding and Customization
Site URL: https://officialbasics.squarespace.com Hello, Is there a way to move the account login element to the navigation bar? I've attached a screenshot to make it more clear. Site access:officialbasics.squarespace.compass: tampa123 Kind Regards, -
Site URL: https://www.arkady.tech/product Hi all! Have a simple CSS problem I need your help with. I want to reduce the area between the navigation header and the main content, denoted in pink, by about 100px. None of the code I've tried myself has worked. Please show me the right way to do it, Squarespace wizards! Big thanks in advance. -
Hi! I am new to the circle community but am in the middle of developing a food blog site for a client. I really like the announcement bar as a form of navigation on this site https://www.elisabethandbutter.com/. does anyone know how I can implement this on my site? Thanks so much!
- 2 replies
-
- 1
-
-
- announcement-bar
- heading
- (and 1 more)
-
Hi, I'm in the midst of building my site (thus, no URL to share yet) and need a floating button that appears on every page that will take the user to the 'Contact' page. I imagine it would be a phone icon, white on a round black background + 'Reveal' animation. Is this the right place to request for a CSS code for this? Thanks!
-
Icon in Secondary Navigation Affecting Text
mackenzieu posted a question in Coding and Customization
Hello! I added the following code to add a shopping card icon next to Order Online menu item. It works great, but it affects the alignment of the first link. They are not aligned--I added the red lines so you can see how they are different. Any way to fix? //Shopping Cart Icon// .Header-nav--secondary .Header-nav-item:nth-child(1)::before { content: ''; height: 20px; width: 20px; display: inline-block; background: url('https://static1.squarespace.com/static/5fcdc0a3cd8500165ad2a837/t/61300c51f387ea52936de890/1630538833025/shopping-cart+%282%29.png'); background-size: contain; background-repeat: no-repeat; vertical-align: middle; margin-right: 5px; }
