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

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

Question

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.

sanitized-Website_HomePage.jpg

Share this post


Link to post

6 answers to this question

Recommended Posts

  • 1

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

 

Share this post


Link to post
  • 1

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?

Share this post


Link to post
  • 0
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.

Share this post


Link to post
  • 0
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

Share this post


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