diff --git a/template/scss/_menu.scss b/template/scss/_menu.scss index 822b5a6..529f85a 100644 --- a/template/scss/_menu.scss +++ b/template/scss/_menu.scss @@ -9,7 +9,17 @@ > .nav-item { display: block; background-color: c.$light-gray; - padding: 5px 10px; - border-radius: 5px; + } +} + +#link-to-mobile-menu { + padding: 0 15px; + + > a { + border: 1pt solid c.$black; + padding: 5px 10px; + + text-decoration: none; + color: inherit; } } diff --git a/template/scss/_positions.scss b/template/scss/_positions.scss index 4bfd37c..6228115 100644 --- a/template/scss/_positions.scss +++ b/template/scss/_positions.scss @@ -35,6 +35,12 @@ body { } } +#link-to-mobile-menu { + @include r.normal { + display: none; + } +} + #footer { padding: 2px 0; color: $light-gray; diff --git a/template/src/index.php b/template/src/index.php index b7daf37..85af808 100644 --- a/template/src/index.php +++ b/template/src/index.php @@ -35,12 +35,17 @@ JHtml::_('script', 'user.js', array('version' => 'auto', 'relative' => true)); <div class="black-background"></div> </div> +<div id="link-to-mobile-menu"> + <a href="#menu">Menu</a> +</div> + <div id="main-row"> <div id="main"> <jdoc:include type="component" /> </div> <div id="menu"> + <a target="menu"></a> <jdoc:include type="modules" name="menu" /> </div> </div>