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

I want to put a phone number, and a link above my top navigation. However I do not see any way to do this within the Hayden Template. Does anyone know how to do this with custom code? Here is a screenshot Of what I am trying to accomplish.

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?

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.

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

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?

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

18 hours ago, tuanphan said:

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

You are amazing. Thanks so much.

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

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

On 12/25/2019 at 10:08 PM, tuanphan said:

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

Thanks so much, that did work.