How can I add a second header to my website?

[Andy106]

Hello guys.

I want to have 2 headers for my site , the tope header with my loggo, a search bar and the cart icon. The second header I want it to have the Menu options. I am sending an example image here:

Store link:
https://03df82.myshopify.com/

Thanks!

[suyash1]

@Andy106 - you will need developer to make code editing in your site to make it like the given screenshot

[Andy106]

I ahieved to reach up to here: https://1rokabnxpsaai96s-78669414739.shopifypreview.com

I used this liquid code:

Click to expand...

<section id="custom-menu-section">
<nav class="site-nav">
<ul>
<li><a href="/" title="Home">Home</a></li>

<!-- Catalog Dropdown -->
<li class="dropdown">
<a href="/collections/all" title="Catalog">Catalog <span class="arrow">&#9662;</span></a> <!-- Added arrow -->
<ul class="dropdown-content">
<li><a href="/collections/all-products" title="All Products">All Products</a></li>
<li><a href="/collections/offers" title="Offers">Offers</a></li>
<li><a href="/collections/best-selling" title="Best Selling">Best Selling</a></li>
<li><a href="/collections/men-clothing" title="Men Clothing">Men Clothing</a></li>
<li><a href="/collections/gadgets" title="Gadgets">Gadgets</a></li>
</ul>
</li>

<li><a href="/pages/contact" title="Contact">Contact</a></li>
<li><a href="/pages/about-us" title="About Us">About Us</a></li>
<li><a href="/pages/faq" title="FAQ">FAQ</a></li>
</ul>
</nav>
</section>

<style>
#custom-menu-section {
text-align: center;
background-color: #f2f2f2; /* Adjust background color as needed */
padding: 10px 0;
}
#custom-menu-section .site-nav ul {
list-style-type: none;
padding: 0;
margin: 0;
}
#custom-menu-section .site-nav ul li {
display: inline-block;
position: relative; /* This is for positioning the dropdown content */
margin: 0 10px;
}
#custom-menu-section .site-nav ul li a {
text-decoration: none;
color: #333; /* Adjust link color as needed */
padding: 10px 0; /* Padding for better hover effect */
}
#custom-menu-section .site-nav ul li a:hover {
text-decoration: underline; /* Underline on hover */
}
/* Dropdown Content (Hidden by default) */
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
display: block;
}
/* Style for the dropdown arrow */
.arrow {
display: inline-block;
margin-left: 5px;
}
</style>

<script>
// Variables to hold the state
var header = document.getElementById('custom-menu-section');
var lastScrollTop = 0;

window.addEventListener('scroll', function() {
var currentScroll = window.pageYOffset || document.documentElement.scrollTop;

if (currentScroll < lastScrollTop) {
// Scroll up
header.classList.add('sticky');
} else {
// Scroll down
header.classList.remove('sticky');
}

lastScrollTop = currentScroll <= 0 ? 0 : currentScroll; // For Mobile or negative scrolling
}, false);
</script>

And this css:

Click to expand...

/* Make header sticky */
#custom-menu-section.sticky {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1000;
background: white; /* Add background to ensure the menu is not transparent when sticky */
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Optional: adds shadow for better visibility */
} /* Style for links on hover */
#custom-menu-section a:hover {
text-decoration: underline;
}

I have some issues, with the sticky header and the possition of the sticky header, as I want it to be exactly below the original header. Is that something that;s easy to solve?

[suyash1]

@Andy106 - not very easy, but I can see that you have achieved to make header sticky while going upwords. it stays sticky even if you reach at top, so you need to make changes to code such that if user reaches top then sticky header i changed into normal regular header

[Andy106]

Ok, I managed to fix the sticky header using this updated liquid: 

Click to expand...

<section id="custom-menu-section">
<nav class="site-nav">
<ul>
<li><a href="/" title="Home">Home</a></li>

<!-- Catalog Dropdown -->
<li class="dropdown">
<a href="/collections/all" title="Catalog">Catalog <span class="arrow">&#9662;</span></a> <!-- Added arrow -->
<ul class="dropdown-content">
<li><a href="/collections/all-products" title="All Products">All Products</a></li>
<li><a href="/collections/offers" title="Offers">Offers</a></li>
<li><a href="/collections/best-selling" title="Best Selling">Best Selling</a></li>
<li><a href="/collections/men-clothing" title="Men Clothing">Men Clothing</a></li>
<li><a href="/collections/gadgets" title="Gadgets">Gadgets</a></li>
</ul>
</li>

<li><a href="/pages/contact" title="Contact">Contact</a></li>
<li><a href="/pages/about-us" title="About Us">About Us</a></li>
<li><a href="/pages/faq" title="FAQ">FAQ</a></li>
</ul>
</nav>
</section>

<style>
#custom-menu-section {
text-align: center;
background-color: #f2f2f2; /* Adjust background color as needed */
padding: 10px 0;
}
#custom-menu-section .site-nav ul {
list-style-type: none;
padding: 0;
margin: 0;
}
#custom-menu-section .site-nav ul li {
display: inline-block;
position: relative; /* This is for positioning the dropdown content */
margin: 0 10px;
}
#custom-menu-section .site-nav ul li a {
text-decoration: none;
color: #333; /* Adjust link color as needed */
padding: 10px 0; /* Padding for better hover effect */
}
#custom-menu-section .site-nav ul li a:hover {
text-decoration: underline; /* Underline on hover */
}
/* Dropdown Content (Hidden by default) */
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
display: block;
}
/* Style for the dropdown arrow */
.arrow {
display: inline-block;
margin-left: 5px;
}
</style>

<script>
var header = document.getElementById('custom-menu-section');
var lastScrollTop = 0;

window.addEventListener('scroll', function() {
var currentScroll = window.pageYOffset || document.documentElement.scrollTop;

if (currentScroll < lastScrollTop) {
// Scroll up
header.classList.add('sticky');
} else {
// Scroll down
header.classList.remove('sticky');
}

// Check if the user is within 5 pixels from the top
if (currentScroll <= 25) {
header.classList.remove('sticky');
}

lastScrollTop = currentScroll <= 0 ? 0 : currentScroll; // For mobile or negative scrolling
}, false);
</script>

My problem now is that for some reason, when I hover over the catalog in order to view the subcategories, the subcategory box disappears when I move my curson under the 'all products', and this happens only in the home page. Can you suggest why this is happening?

[suyash1]

@Andy106 - can you please share the screenshot? not able to see it

[Andy106]

I managed to fix that issue, I thinkt the problem was the banned image, interrupting the motion of the cursor, so I changed th Z-index of the dropdown box to 1000 to ensure that its always infront of other elements. I added some shadow and outline to the drop down to make sure it stand out better. Here's how is looking now:
https://1rokabnxpsaai96s-78669414739.shopifypreview.com

It looks good on pc, but not on moblile/tablet. My next step is to make it to hamburger style for mobile view. Do you have any tips on how to do that?

[Dan-From-Ryviu]

You can change layout of your header from Online store > Themes > Customize > Header 

[Andy106]

I tried this, but the issue is that I want to have my loggo to the left of the side so I can utilize a larger search bar. Like in this image:

[Bells1]

Have you solved the problem? I am looking to add another header, but it is very tricky.