responsive menu

Does anyone know how to make my website menu more responsive, as in mobile friendly? Site: https://kracov.org

Code

@font-face {
font-family: 'Samhain';
src: url('https://kracov.org/fonts/Samhain.eot'); /* IE9 Compat Modes */
src: url('https://kracov.org/fonts/Samhain.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('https://kracov.org/fonts/Samhain.woff2') format('woff2'), /* Super Modern Browsers */
url('https://kracov.org/fonts/Samhain.woff') format('woff'), /* Pretty Modern Browsers */
url('https://kracov.org/fonts/Samhain.ttf') format('truetype'), /* Safari, Android, iOS */
url('https://kracov.org/fonts/Samhain.svg#svgFontName') format('svg'); /* Legacy iOS */
}
/*.dropdown {
position: relative;
display: inline-block;
}

.dropdown-content {
display: none;
position: absolute;
background-color: black;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
padding: 12px 16px;
z-index: 1;
}

.dropdown:hover .dropdown-content {
display: block;
}*/
#menu-kracmenu {
font-family: 'Samhain';
margin-top: 110px;
justify-content: center;
width: 786px;
margin-left: -393px;
}
ul#menu-kracmenu.menu li a {
font-family: 'Samhain';
font-size: 22px;
}
ul#menu-kracmenu.menu ul.sub-menu a {
font-family: 'Verdana';

Click to expand...

I guess the best you can do is have two menus, the horizontal one that you have right now and a second one vertical or whatever you like (you can find many examples with a simple Google search and toggle them via:

@media only screen and (max-width: 500px) {
#navigation-desktop {
display: none;
}

#navigation-mobile {
display: block;
}
}

@media only screen and (min-width: 501px) {
#navigation-desktop {
display: block;
}

#navigation-mobile {
display: none;
}
}

500px and 501px values can be adjusted as you wish.

Are you referring to mobile redirecting? Like redirecting users to a mobile version of the website? I thought of doing it but it's a lot of work having to deal with two different websites. Or are you referring to adding that to my css code within my wordpress theme? I don't know how to do the formatting- is that code supposed to be on the very top?

No, you will not have two sites. You will have two menus. The code I posted tells the browser if width is 500px or less show the mobile menu. If width is 501px or more, show the desktop menu. The rest of the page remains the same.

And I just add that code to the top? I tried it just now. Seems to be no difference. I assume I'm supposed to edit the code you provided to target the name of my menu?

The code I gave you itself does nothing. You need to have the two menus to work. The current one will have id="navigation-desktop" and the second one that will be added for mobile devices will have id="navigation-mobile". Only then the above code will work.

I see. Thanks for trying to help. I've posted on 5 discord servers, reddit and two message boards, and no one can help me. I'm not a css expert. And someone offered $600 to have them do it for me which is not affordable.

I'm not a css expert either. I faced the same issue with you some years ago and I solved it. I can help you further if you want.

Okay. So do I copy my css code and use that as the second menu? I don't understand where to place anything. I'm decent at styling and targetting elements, but the formatting/placement I know little about.

Find the menu code you like for mobile. Add it below the current menu. Add those I posted above and we will see it then.

@Artem Okay, here's what I could do:
I added this menu to the code you provided, as well as the menu selector for my original menu

<nav class="menu">
<ol>
<li class="menu-item"><a href="#0">Home</a></li>
<li class="menu-item"><a href="#0">About</a></li>
<li class="menu-item">
<a href="#0">Widgets</a>
<ol class="sub-menu">
<li class="menu-item"><a href="#0">Big Widgets</a></li>
<li class="menu-item"><a href="#0">Bigger Widgets</a></li>
<li class="menu-item"><a href="#0">Huge Widgets</a></li>
</ol>
</li>
<li class="menu-item">
<a href="#0">Kabobs</a>
<ol class="sub-menu">
<li class="menu-item"><a href="#0">Shishkabobs</a></li>
<li class="menu-item"><a href="#0">BBQ kabobs</a></li>
<li class="menu-item"><a href="#0">Summer kabobs</a></li>
</ol>
</li>
<li class="menu-item"><a href="#0">Contact</a></li>
</ol>
</nav>

@media only screen and (max-width: 500px) {
#Kracmenu {
display: none;
}

#menu {
display: block;
}
}

@media only screen and (min-width: 501px) {
#Kracmenu{
display: block;
}

#menu {
display: none;
}
}

$black: #2A363B
$red: #F67280
$red-dark: #C06C84
$orange: #F8B195
$yellow: #FECEAB
$white: #FFF

@mixin mobile
@media screen and (max-width: 600px)
@content

.menu
background: $red
height: 4rem

ol
list-style-type: none
margin: 0 auto
padding: 0

> ol
max-width: 1000px
padding: 0 2rem
display: flex

> .menu-item
flex: 1
padding: 0.75rem 0

&:after
content: ''
position: absolute
width: 4px
height: 4px
border-radius: 50%
bottom: 5px
left: calc(50% - 2px)
background: $yellow
will-change: transform
transform: scale(0)
transition: transform 0.2s ease

&:hover:after
transform: scale(1)

&-item
position: relative
line-height: 2.5rem
text-align: center

a
overflow: hidden
white-space: nowrap
text-overflow: ellipsis
display: block
color: $white

@at-root .sub-menu &
padding: 0.75rem 0
background: $red
opacity: 0
transform-origin: bottom
animation: enter 0.2s ease forwards

@for $n from 1 through 3
&:nth-child(#{$n})
animation-duration: 0.2s + 0.1s * ($n - 1)
animation-delay: 0.1s * ($n - 1)

&:hover
background: $orange

a
padding: 0 0.75rem

@include mobile
background: $red-dark

@include mobile
position: relative

&:after
content: ''
position: absolute
top: calc(50% - 2px)
right: 1rem
width: 30px
height: 4px
background: $white
box-shadow: 0 10px $white, 0 -10px $white

> ol
display: none
background: $red
flex-direction: column
justify-content: center
height: 100vh
animation: fade 0.2s ease-out

> .menu-item
flex: 0
opacity: 0
animation: enter 0.3s ease-out forwards

@for $n from 1 through 5
&:nth-child(#{$n})
animation-delay: 0.1s * ($n - 1)

& + .menu-item
margin-top: 0.75rem

&:after
left: auto
right: 1rem
bottom: calc(50% - 2px)

&:hover
z-index: 1

&:hover
> ol
display: flex

&:after
box-shadow: none

.sub-menu
position: absolute
width: 100%
top: 100%
left: 0
display: none
z-index: 1

@at-root .menu-item:hover > &
display: block

@include mobile
width: 100vw
left: -2rem
top: 50%
transform: translateY(-50%)

html, body
font-size: 16px
font-family: 'Fira Mono', monospace
margin: 0
background: $black

*
box-sizing: border-box

&:before, &:after
box-sizing: inherit

a
text-decoration: none

@keyframes enter
from
opacity: 0
transform: scaleY(0.98) translateY(10px)
to
opacity: 1
transform: none

@keyframes fade
from
opacity: 0
to
opacity: 1

Are all these in one file? There are many {} missing. Missing ; too. I also see some errors in the html code, I will fix it tomorrow.

no its not intended to be the same file. i know the html code will be inputted into the html field. It's something I found from a css menu website that have various free menus.

Inside <head> of original page you have "<meta name="viewport" content="width=device-width, initial-scale=1.0">". Keep it.
If you change the <nav> with:
<nav id="Kracmenu" class="menu">
<ol>
<li class="menu-item"><a href="#0">Home</a></li>
<li class="menu-item"><a href="#0">About</a></li>
<li class="menu-item">
<a href="">Widgets</a>
<ol class="sub-menu">
<li class="menu-item"><a href="#0">Big Widgets</a></li>
<li class="menu-item"><a href="#0">Bigger Widgets</a></li>
<li class="menu-item"><a href="#0">Huge Widgets</a></li>
</ol>
</li>
<li class="menu-item">
<a href="">Kabobs</a>
<ol class="sub-menu">
<li class="menu-item"><a href="#0">Shishkabobs</a></li>
<li class="menu-item"><a href="#0">BBQ kabobs</a></li>
<li class="menu-item"><a href="#0">Summer kabobs</a></li>
</ol>
</li>
<li class="menu-item"><a href="#0">Contact</a></li>
</ol>
</nav>

<nav id=menu" class="menu">
<ol>
<li class="menu-item"><a href="#0">mobile Home</a></li>
<li class="menu-item"><a href="#0">mobile About</a></li>
<li class="menu-item">
<a href="">mobile Widgets</a>
<ol class="sub-menu">
<li class="menu-item"><a href="#0">Big Widgets</a></li>
<li class="menu-item"><a href="#0">Bigger Widgets</a></li>
<li class="menu-item"><a href="#0">Huge Widgets</a></li>
</ol>
</li>
<li class="menu-item">
<a href="">mobile Kabobs</a>
<ol class="sub-menu">
<li class="menu-item"><a href="#0">Shishkabobs</a></li>
<li class="menu-item"><a href="#0">BBQ kabobs</a></li>
<li class="menu-item"><a href="#0">Summer kabobs</a></li>
</ol>
</li>
<li class="menu-item"><a href="#0">mobile Contact</a></li>
</ol>
</nav>

you will see the mobile version in screens less that 500 pixels. You have one major step. Decide which css you want to keep. Initially keep the one you already have on your page and start experimenting as you wish. I can help if you have specific wishes.

I want to keep my css menu so I'm assuming add to this new code? I don't know where to put it exactly.

Goto to the main html file and find the current menu. Make the changes according to the sample code I posted. Keep in mind that in you will have two menus in your html files but only one of them will be visible according to screen size.

I don't edit html files. I use Wordpress Elementor and I enter in the custom html field and the css field for the css.

In this case I don't know how to help you. I hate WordPress and Joomla because the keep you hands tight in many ways. Have you tried AI? It helped me solve my issues when nobody in here did.