I have successfully created a unique flexbox navigation bar that aligns with my design vision, but I am facing an obstacle. I want to incorporate dropdown menus into some of the navbar items, and despite exhausting various resources, I haven't found a solution that works for me. The formatting may seem unconventional, but it is due to the limitations of the Real Geeks platform when making edits.
CSS
.bg-palette-navigationBackground-color {
background-color: transparent;
}
@import url('https://fonts.googleapis.com/css2?family=Barlow+Semi+Condensed:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
body {
background: transparent;
font-size: 1.1em;
line-height: 1.45em;
color: #ffffff;
margin: 0;
padding: 0;
font-family: 'Barlow Semi Condensed', sans-serif;
}
a {
color: #FFF;
}
p {
text-align: center;
}
.toggle,
[id^=drop] {
display: none;
}
nav {
margin: 0;
padding: 0;
background-color: #404041;
width: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 500;
}
#logo {
display: block;
...
<ul>
<li><a href="#">CAREERS</a></li>
<li><a href="#">AGENT PORTAL</a></li>
</ul>
</nav>