[cmsmart]

My solution was a change in the index.js

if (this.checked) {
$menu.hide().slideDown(250, function() { $menu.css(‘display’, ‘block’); });
} else {
$menu.show().slideUp(250, function() { $menu.css(‘display’, ‘none’); });
}

instead of twice ‘ ‘ as in

https://jsfiddle.net/vadikom/v1yunvvm/?utm_source=website&utm_medium=embed&utm_campaign=v1yunvvm

[cmsmart]

If You look at
https://www.smartmenus.org/docs/#styling-menus (there : smalll screen devices) You find a code with

<!– Mobile menu toggle button (hamburger/x icon) –>
<input id=”main-menu-state” type=”checkbox” />
<label class=”main-menu-btn” for=”main-menu-state”>
<span class=”main-menu-btn-icon”></span> Toggle main menu visibility
</label>

<h2 class=”nav-brand”>Brand</h2>

which You can put into the footer (together with the js)

At https://www.smartmenus.org/about/themes/ You just have to shift the page together into narrow mode and then the button appears in the top nav-line.

an example is at
https://jsfiddle.net/vadikom/oxe40pat/?utm_source=website&utm_medium=embed&utm_campaign=oxe40pat

This will function with some modifications.

[cmsmart]

A further notice : The evtl. unclear problem is that the menu does not close in narrow-mode but stays open. It is probably not only the button but a misfunction of the menu in narrow mode (http://typesetter5.bplaced.net/sma) in the CMS-Version.

[cmsmart]

You can try to add a class to <nav role=navigation and the try to style it like at W3C
https://www.w3schools.com/howto/howto_js_navbar_sticky.asp

or use a js like https://github.com/MonikaManduk/Responsive-nav-fixed-top (there are also others) – i have not tested the evtl. upcoming or remaining problems (evtl. overflow hidden for the content etc.).

[cmsmart]

Please have a look at https://codepen.io/vadikom/pen/pbqyOB and at https://codepen.io/vadikom/pen/jqooKo.

If You klick in Firefox(portable developer edition is at sourceforge) with the right mousekey at the right side of the nav and then choose ‘Inspect element ‘, then You see <nav role=navigation> which is also the marked in firefox.
If You add a class to <nav … > then You can style it – evtl. with !important; at the end of the specific parameter like max- height.
The next line is <ul id=main-menu class=”sm sm-simple” …> . If You mark this line You will find: ul, .sm li {.. line-height etc;
These parameters are in the sm-simple.css . Here You can change these and some other parameters.

[cmsmart]

I found the solution myself : $(‘div.nav span:first’).remove();

Smartmenu gets disturbed if the active link has a span – which should not be !

[Author]

Posts