responsive menu

[Kracov]

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';

 

[Artem]

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.

 

[Kracov]

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?

 

[Artem]

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.

 

[Kracov]

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?

 

[Artem]

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.

 

[Kracov]

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.

 

[Artem]

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.

 

[Kracov]

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.

 

[Artem]

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.