Jump to content

Is it Possible to Put a Constant Element Above The Top Navigation?

Recommended Posts

  • Replies 9
  • Created
  • Last Reply

You can insert HTML to create phone/link in Header Code Injection

and use CSS to style them ūüėČ

I don't see phone/link in image. Can you hightlight?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
2 hours ago, tuanphan said:

You can insert HTML to create phone/link in Header Code Injection

and use CSS to style them ūüėČ

I don't see phone/link in image. Can you hightlight?

Hey @tuanphan I said it before, I'll say it again, I think you are the most helpful person on this whole website.

I did not think of inserting it into the header code injection, I will try that. Thanks for the tip. The phone number is blurred out, but the blue text above the white navigation is what I am talking about. I just wanted a sort of second navigation that shows these simple things that are kinda special and different from the other navigation elements.

Link to comment

You can use HTML like this (just an example)

<ul class="kl-topnav">
  <li><a href="abcxyz.com">Nav item 1</a></li>
  <li><a href="abcxyz.com">Nav item 2</a></li>
  <li><a href="abcxyz.com">Nav item 3</a></li>
  <li><a href="abcxyz.com">Nav item 4</a></li>
</ul>

and CSS to style

.kl-topnav {
	list-style-type: none;
	margin-left: 0;
	padding-left: 0;
	display: flex;
	flex-direction: row;
}
.kl-topnav a {
	text-decoration: none;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
18 hours ago, tuanphan said:

You can use HTML like this (just an example)


<ul class="kl-topnav">
  <li><a href="abcxyz.com">Nav item 1</a></li>
  <li><a href="abcxyz.com">Nav item 2</a></li>
  <li><a href="abcxyz.com">Nav item 3</a></li>
  <li><a href="abcxyz.com">Nav item 4</a></li>
</ul>

and CSS to style


.kl-topnav {
	list-style-type: none;
	margin-left: 0;
	padding-left: 0;
	display: flex;
	flex-direction: row;
}
.kl-topnav a {
	text-decoration: none;
}

 

This code worked. And I guess you were right, reading that flexbox page really helped me to figure things out https://css-tricks.com/snippets/css/a-guide-to-flexbox/. I am attaching a screenshot of what I got. I have a new problem now though. When I make background transparent, or set the opacity to zero. There is still this dark background behind the text. I want my banner image to be behind the text, do you know how to do that @tuanphan?

headerabovethehead.png

Link to comment
  • 1 month later...
On 11/19/2019 at 7:15 PM, tuanphan said:

try position:absolute; top:0; right:0; left:0; z-index:999; for .kl-topnav

@tuanphan Sorry to message you on Christmas, and I realize i checked this question as solved, but upon actually using the Nav for a link, the links were inaccessible unless I changed position:absolute to position:relative or something else. here is the the site https://grasshopper-rose-xsw2.squarespace.com

Link to comment
1 hour ago, PMDesigner said:

@tuanphan Sorry to message you on Christmas, and I realize i checked this question as solved, but upon actually using the Nav for a link, the links were inaccessible unless I changed position:absolute to position:relative or something else. here is the the site https://grasshopper-rose-xsw2.squarespace.com

If you use absolute for kl-topnav, header will overlap top nav. So you need to add margin top to header.

use this code

header#header {
    top: 30px;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

Archived

This topic is now archived and is closed to further replies.

√ó
√ó
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.