Menu Hover

Mauer Themes Support Essentialist Menu Hover

Tagged: , ,

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
  • #1549

    Hi there!
    We love your theme and have been really pleased so far!

    Just a few questions:

    1. Is there a way to tighten up the space between a custom image & the menu bar?
    2. Is it possible to create a menu that drops down on a hover and not a click?
    3. Finally, is it possible to serve one size of our header image on desktop and another size on mobile?

    Thanks in advance!


    Hello Maura,

    It’s great to know you like the theme! Thank you for having chosen it for your project.

    You can tighten the vertical space between logo and menu with the following CSS code:

    .section-logo-area {margin-top: 1.5rem;}

    Feel free to change 1.5 to any value of your choice (including negative).

    You can add custom CSS with the Simple Custom CSS plugin. Once you install and activate it, in your Admin Panel please go to ‘Appearance’ > ‘Custom CSS’. There insert the code you see above and save.

    You can have the menu dropdown on hover rather than on click by using the following CSS code (you can insert it the same way as the code for the logo — just below it):

    /* Bootstrap 3 - Navbar dropdown on hover */
    @media (min-width: 768px) {
    .sidebar-nav {padding: 9px 0;}
    .dropdown-menu .sub-menu {
      left: 100%;
      position: absolute;
      top: 0;
      visibility: hidden;
      margin-top: -1px;
    .dropdown-menu li:hover .sub-menu {visibility: visible;}
    .dropdown:hover .dropdown-menu {display: block;}
    .nav-tabs .dropdown-menu, .nav-pills .dropdown-menu, .navbar .dropdown-menu {margin-top: 0;}
    .navbar .sub-menu:before {
      border-bottom: 7px solid transparent;
      border-left: none;
      border-right: 7px solid rgba(0, 0, 0, 0.2);
      border-top: 7px solid transparent;
      left: -7px;
      top: 10px;
    .navbar .sub-menu:after {
      border-top: 6px solid transparent;
      border-left: none;
      border-right: 6px solid #fff;
      border-bottom: 6px solid transparent;
      left: 10px;
      top: 11px;
      left: -6px;

    This would require custom coding which is not included into support (according to ThemeForest rules).


Viewing 2 posts - 1 through 2 (of 2 total)
  • You must be logged in to reply to this topic.