responsive menu

[Kracov]

Does anyone know how to make my website menu more responsive, as in mobile friendly? Site: Kracov's Domain

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

 

[LiquidC0der]

Does anyone know how to make my website menu more responsive, as in mobile friendly? Site: Kracov's Domain

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

Idk how to do it, but friggin sweet website!

 

[tomliv]

Here's a decent start. For MOBILE:

.site-header .header-inner: remove width and max-width
#menu-kracmenu: remove margin-top and margin-left. Change width to 100%.

Also, I would not use hover for the dropdowns. I would use click. Better for mobile as well as better accessibility.

I'd also not do what you are doing for .site-title and just put your logo in there. You can wrap it in the link. Add good alt text on the logo. Making it a real item on the page will push the menu down under the logo.

Let me know if this isn't clear or have any questions.

 

[simong1993]

Bootstrap build your site in bootstrap and let that do the heavy lifting 🙂