I've successfully created a Vertical Menu with hidden submenus, but I'm struggling to make the submenu appear on hover. Any suggestions on how to achieve this? Also, I'd like to align the text all the way to the left and remove the bullets from the lists without affecting the text alignment. Additionally, I'm looking for the best way to set the width of the "main-nav" element. I want the logo to be positioned above the navigation menu without overlapping any text. How can I ensure that the logo's side lines up perfectly with the left edge of the text? The red border is added for testing purposes.
Check out my codepen project.
[EXTRA] I'm venturing into creating my own website using WordPress and a custom theme. Is there a way to fetch the logo image from the site identity tab in the customize sidebar? Ideally, if no logo is selected, I would like to display text instead. Would a WordPress PHP function be necessary for this setup? Moreover, I wish to integrate the logo into the main-navigation by default. Despite having the register_nav_menu() function in my functions.php file assigning a menu to Main Navigation with the class main-navigation, I'm unsure how to position the logo above this menu by default. Any help or tips for a novice in WordPress and coding would be greatly appreciated.
HTML:
<div id="container">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/2f/Google_2015_logo.svg/2000px-Google_2015_logo.svg.png" class="logo-branding" />
<nav id="site-navigation" class="main-navigation">
<ul>
<li class="active"><a href="#" class="active">Overview</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Submenu</a></li>
<ul class="sub-menu">
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
</ul>
<li><a href="#">Contact</a></li>
</ul>
</nav>
CSS:
.main-navigation {
bottom: 2%;
margin-left: 4%;
display: block;
float: left;
border: 1px solid red;
position: fixed;
overflow: hidden;
width: 15%;
}
.main-navigation li, .main-navigation a {
list-style-type: none;
text-align: left;
text-decoration: none;
color: black;
text-transform: lowercase;
font: 16pt helvetica, sans serif;
padding: 1%;
}
.main-navigation a:hover, .main-navigation .active {
color: tan !important;
font-weight: bold !important;
}
.main-navigation .sub-menu {
display: none;
}
.main-navigation .sub-menu:hover {
display: block;
}
#container {
height: 10000px;
}
.logo-branding {
display: block;
position: fixed;
margin-top: 8%;
transform: rotate(90deg);
width: 15%;
}
JS:
/* No JS */