Fonts – Menu – stylings

Hi,

I’ve decided to use on our web-page a different font, namely Caveat for the heading and Verdana for the typing. Unfortunately the font setting for the header does NOT apply to all headers which forces me to set them manually in the CSS. Another thing with the settings is that Caveat has a much smaller display font-size than Verdana, i.e. I need to adjust the font-size in different places as well.

One of the remaing issues is the Menu. I recognize that the styling with the default fonts is a mess – due to different sizes. My final goal would be:

Menu-Top-level: Caveat, Font-size like everywhere else
Menu-Sub-levels: Either Caveat or Verdana – with a decreased font-level

I only managed it to change the font-size for hover but this gets quite easily a mess… (Overfloating menus, tooo big fonts, Icon for drop-down not displayed properly).

1) Can somebody plz fix the CSS code to have met the above requirements?
2) I recognize that clicking on the menu automatically selects the menu, i.e. the sub-menu is opened. Only when I long-click than the menu is opened. A regular left-click fails. This is mainly a big issue on Tablets where I do NOT have a mouse and the user just clicks on the top-level of the menu but the sub-menu do NOT open. How to fix it that a regular click just opens the menu instead of loading the page?

In certain environments I experienced another – even more ugly – user expierence but I want first a fix for the two issues.

For more details see the video.

thx
roland

Pics: https://www.dropbox.com/sh/1neow438ti10onv/AABwJ9y-6FuO64LzHEfFyaHNa?dl=0

CSS-Code I used up till now:

/* Heading  */
body .av-special-heading .av-special-heading-tag {
font-weight: 700!important;
font-size: xx-large!important;
color: #df8020;
}
/* second option: header style for AJAX-loaded items */
body  .grid-entry-title, .entry-title {
font-weight: 700!important;
font-size: xx-large!important;
color: #df8020!important;
}
/* anchor headlines */
body  .toggler {
font-family: Caveat!important;
font-weight: 500!important;
font-size: x-large!important;
color: #eaa262!important;
}
/* menu items... */
.av-hamburger-inner, .av-hamburger-inner::after, .av-hamburger-inner::before {
    background: #a53434!important;
}
span.av-hamburger:after {
    content: 'Menu ';
    font-size:xx-large;
    float: left;
    margin-right: 10px;
   font-family: Caveat!important;
   color: #df8020!important;
}
div.av-burger-overlay-bg {
    background-color: grey;
}
.avia-menu-text{
 font-weight:bold; 
 font-size:xx-large; !important; 
 color: #444444!important;
}
/* end menu */
.menu li > a:after { 
   content: ' ▾'; 
   color: #e0791f !important;
} 
.menu li > a:only-child:after { content: ''; }

/* excerpt sub-titles  */
.grid-entry-excerpt {
    min-height: 46px!important; 
    display: flex;
    align-items: center;
    justify-content: center;
 }

div.portfolio_preview_container{
   margin-bottom:10px;
}
.portfolio_preview_container.open_container {
    margin-top: 10px;
}
/* LOGO + Text next to the logo .... */
.logo img{float: left}
#top .logo, #top .logo a {overflow: visible }
#top .subtext {float: left; position: relative}

#top .logo-title {
transition: opacity 0.4s ease-out 0s;
-moz-transition: opacity 0.4s ease-out;
-webkit-transition: opacity 0.4s ease-out;
-o-transition: opacity 0.4s ease-out;
    color: #333333;
    font-size: 40px;
    font-family: "Caveat" !important;
    font-weight: bold !important;
    opacity: 1;
    position: absolute;
    white-space: nowrap;
}

@media only screen and (max-width: 520px){
#top .logo-title {opacity: 0; filter: alpha(opacity=0)}
}