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

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


PMDesigner

Question

9 answers to this question

Recommended Posts

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

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
  • 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?

Email me if you have need any help (free, of course.). Answer within 24 hours.

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

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

Link to comment
  • 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

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

Create an account or sign in to comment

You need to be a member in order to leave a comment

√ó
√ó
  • Create New...