How can I create two menu bars in the Dawn theme?

Store Design
, , ,

Topic summary

A user wants to create a dual menu bar layout in the Dawn theme, sharing a reference image showing the desired design.

Proposed Solution:

  • Another user provided HTML/CSS code demonstrating how to create two separate menu bars using <div> elements with IDs #menu1 and #menu2
  • The code includes basic styling with different background colors (#333 and #555) and hover effects
  • Each menu bar contains sample navigation links (Home, About, Services for the first; Contact, Portfolio, Blog for the second)

Current Status:

  • The original poster asks where to paste the provided code within their theme
  • This implementation question remains unanswered
  • The discussion is ongoing, as the user needs guidance on integrating the code into the Dawn theme structure

Note: Some text in the conversation appears corrupted or reversed, but the core technical solution and question are clear.

Summarized with AI on November 13. AI used: claude-sonnet-4-5-20250929.
1

Hello! I would like to make a Dawn Theme like this>>

SKAbdiel_0-1705338447353.png
SKAbdiel_0-1705338447353.png1109×298 121 KB

Help me please.

2

Certainly! To create two menu bars in a website or application, you can use HTML and CSS. Below is a simple example with HTML and CSS code to demonstrate how you can create two menu bars:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/* Style for the first menu bar */
#menu1 {
background-color: #333;
overflow: hidden;
}

#menu1 a {
float: left;
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}

#menu1 a:hover {
background-color: #ddd;
color: black;
}

/* Style for the second menu bar */
#menu2 {
background-color: #555;
overflow: hidden;
}

#menu2 a {
float: left;
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}

#menu2 a:hover {
background-color: #ddd;
color: black;
}
</style>
</head>
<body>

<!-- First Menu Bar -->
<div id="menu1">
<a href="#home">Home</a>
<a href="#about">About</a>
<a href="#services">Services</a>
</div>

<!-- Content of the page goes here -->

<!-- Second Menu Bar -->
<div id="menu2">
<a href="#contact">Contact</a>
<a href="#portfolio">Portfolio</a>
<a href="#blog">Blog</a>
</div>

</body>
</html>

In this example, two menu bars (#menu1 and #menu2) are created using the <div> element and styled with CSS. You can customize the appearance and content of the menu bars based on your needs. This is a basic example, and you may want to add additional styling or interactivity based on your specific requirements.

Source: https://mrdigitalmeta.com/

1 Like
3

Where I should paste this code?