I'm brand new to this and I'm attempting to create a vertical navigation menu where the links and letters are also positioned vertically. Although I've managed to make everything vertical, I am now facing an issue with the links getting squished together due to lack of spacing.
Picture 1 shows my desired outcome, while picture 2 displays what I have achieved so far.
I am unsure whether the display property should be set to block or inline-block...
Vertical Navigation
Below is my code: the HTML (with PHP)
<div class="container">
<div class="navigation">
<div class="navigation__left">
<a class="header__logo" href="<?= home_url(); ?>"><?php bloginfo('name'); ?></a>
</div>
<nav aria-label="primary">
<div class="inner">
<?php dazy_top_nav(); ?>
</div>
</nav>
</div>
</div>
The SCSS:
.menu {
margin: 5px 0 0;
padding: rem-calc(100 20);
list-style: none;
font-size: rem-calc(22);
text-align: center;
@include breakpoint($medium) {
margin: rem-calc(0 -15);
padding: 0;
font-family: $regular;
font-size: unquote("clamp(0.938rem, 0.5vw + 0.8rem, 1.375rem)");
font-weight: 400;
line-height: unquote("clamp(1.25rem, 0.9vw + 1rem, 2.125rem)");
letter-spacing: -0.01em;
text-align: initial;
}
&__item {
padding: rem-calc(10 0);
width: 100%;
white-space: nowrap;
@include breakpoint($medium) {
padding: rem-calc(20 0);
}
}
&__link {
color: $black;
text-decoration: none;
display: block;
transform: rotate(-90deg);
and:
.navigation {
height: 100%;
width: 49px;
position: fixed;
top: 0;
left: 0;
background-color: #ffffff;
overflow-x: hidden;
padding-top: 20px;
.inner {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
position: fixed;
list-style: none;
background-color: $white-fever;
transition: transform linear 300ms;
visibility: hidden;
@include breakpoint($medium) {
padding: 0;
transform: translateY(0);
flex-direction: row;
background-color: transparent;
position: relative;
visibility: visible;
transition: none;
}
.is-open & {
transform: translateY(0);
}
}
}