Member Avatar for Mara_2 
I want the menu in Mobirise's project could appear from the left side but I can't find any option like that.

I tried the code below but it didn't work.

.sidenav {
  height: 100%; 
  width: 0; 
  position: fixed; 
  z-index: 1; 
  top: 0; 
  left: 0;
  background-color: #111; 
  overflow-x: hidden; 
  padding-top: 60px; 
  transition: 0.5s;
}

.sidenav a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;
  transition: 0.3s;
}

.sidenav a:hover {
  color: #f1f1f1;
}

.sidenav .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}
  • 2 Contributors
  • 1 Reply
  • 303 Views
  • 1 Hour Discussion Span
  • Latest Post Latest Post by rproffitt

Dani AI

Generated

Most Mobirise themes don’t offer a built‑in left off‑canvas menu, so ’s standalone .sidenav CSS won’t affect the generated navbar unless you either replace the navbar markup or add a matching off‑canvas element and a small script. is correct that this isn’t a UI option in many themes — you’ll need the Code Editor extension or to export and edit the site files.

Add a small off‑canvas element, CSS and a tiny toggle script. Adjust selectors to match your theme (inspect the hamburger button class with DevTools).

<div class="offcanvas-menu" aria-hidden="true">
  <button class="offcanvas-close" aria-label="Close">×</button>
  <ul class="offcanvas-nav">
    <li><a href="#sec1">Section 1</a></li>
    <li><a href="#sec2">Section 2</a></li>
  </ul>
</div>
<div class="offcanvas-backdrop"></div>
.offcanvas-menu {
  position: fixed;
  top: 0;
  left: -280px;
  width: 280px;
  height: 100%;
  background: #111;
  color: #fff;
  z-index: 2100;
  padding-top: 60px;
  transition: left .25s ease;
  overflow-y: auto;
}
body.offcanvas-open .offcanvas-menu { left: 0; }

.offcanvas-backdrop {
  position: fixed;
  top:0; left:0; right:0; bottom:0;
  background: rgba(0,0,0,.5);
  opacity: 0; pointer-events: none;
  transition: opacity .25s ease;
  z-index: 2000;
}
body.offcanvas-open .offcanvas-backdrop { opacity: 1; pointer-events: auto; }

.offcanvas-menu a { display:block; padding:12px 20px; color:#ddd; text-decoration:none; }
.offcanvas-close { position:absolute; top:10px; right:10px; background:transparent; border:0; color:#fff; font-size:28px; }
document.addEventListener('click', function(e){
  if (e.target.closest('.navbar-toggler')) {
    document.body.classList.toggle('offcanvas-open');
  }
  if (e.target.matches('.offcanvas-backdrop') || e.target.closest('.offcanvas-close')) {
    document.body.classList.remove('offcanvas-open');
  }
});

Where to put this: use Mobirise’s Code Editor (paste CSS in the site stylesheet, the markup into a custom HTML block or just after the navbar, and the JS before </body>), or export the site and edit the files. Quick tips: match the hamburger selector if your theme uses a different class, load the script after jQuery if you rely on it, use media queries so desktop nav remains unchanged, and check the console for JS errors. If you prefer not to edit code, switching to a builder with built‑in off‑canvas options is a valid choice as suggested.

Member Avatar for rproffitt

I've seen this question before and it appears as it stands this system does not do that. On top of that it appears Mobirise's own forum and support is failing the users. The more I read about Mobirise the less impressed I am. Maybe it's time to try another system that does what you want?

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.