[Share] Simple Secondary Navigation above Header

If you want to create a simple secondary navigation, like this.

You can follow these steps.

#1. Use this code to Code Injection > Footer.

You can replace text/url to your desired text/url

<nav class="navbar">
        <ul class="nav-links">
            <li><a href="https://www.google.com" target="_blank">Google</a></li>
            <li><a href="https://www.facebook.com" target="_blank">Facebook</a></li>
            <li><a href="https://www.linkedin.com" target="_blank">LinkedIn</a></li>
            <li><a href="https://www.wikipedia.org" target="_blank">Wikipedia</a></li>
            <li><a href="https://www.amazon.com" target="_blank">Amazon</a></li>
        </ul>
</nav>

#2. Use this code to Custom CSS box

header#header {
  pointer-events: initial;
}
.navbar {
    background-color: black; /* Black background */
    padding: 10px 0; /* Top and bottom padding */
    font-size: 16px;
    width: 100%;
    z-index: 9999;
  position: relative;
}
.nav-links {
    list-style-type: none; /* Remove bullet points */
    display: flex; /* Use flexbox */
    justify-content: center; /* Center align */
    padding: 0; /* Remove padding */
}
.nav-links li {
    margin: 0 15px; /* Spacing between links */
}
.nav-links a {
    color: white; /* White text */
    text-decoration: none; /* No underline */
    opacity: 1; /* Opacity */
    transition: opacity 0.3s; /* Transition effect */
}
.nav-links a:hover {
    opacity: 0.5; /* Change opacity on hover */
}
/* Responsive design for mobile */
@media (max-width: 767px) {
    .nav-links {
        flex-direction: row; /* Maintain horizontal layout */
        justify-content: space-around; /* Distribute items evenly */
    }
}

#3. To change secondary navigation color + text color, change these values

To move Secondary Navigation under Header

just add this extra CSS to Custom CSS

header#header {
    display: flex;
    flex-direction: column-reverse;
}