how does this theme work on mobile?

[whereistejas]

First things first, I absolutely love this theme! Great work!

I'm trying to figure out how the theme works on mobile. For example, I'm unable to see the "about" page and "blog" page on my phone, when I open the demo app.

[LiamPowers]

Did you figure this out?

[JugglerX]

@whereistejas Lol yeah the menu isnt there on mobile 😩 - Because the previous version showed the blog posts on the homepage...

Honestly this release was a little rushed, and I wasnt sure if I liked this theme myself! So I can imagine there are some bugs.

Your kind words and feedback is appreciated. I'll get the mobile menu fixed up.

[whereistejas]

@JugglerX that's completely fine. I really like how simplistic this theme is. If you just put some instructions/pointers on how to fix this in a comment, I'm sure someone might pick it up and submit a PR.

[hathawayj]

I would love to see the mobile theme fix. I also like the crisp simplicity.

[camrail]

With 3 menu items everything fits with the standard menu on mobile, so you can just remove /override display:none

_header.scss

.menu-main {
      display: none; <-- delete or override this
    ...

In the end my site name was a bit too wide so I stacked the menu on mobile, looks pretty okay https://www.camr.co/

[arnfou]

I have found some work around this issue. I am very new to this and I am just starting to learn on to build a website, I'm not a web developer at all and I don't speak much css or html, so please excuse this if it is not academic or very clean.

I have adapted this tutorial to use the Bulma navigation bar with Winston theme's design. It is not very clean as the bulma.min.css file needs to be even more tweaked to render the exact same design as Winston, but it is close enough. I don't know how to easily control this file.

Here is the public repository with an working responsive site: https://github.com/arnfou/hugo-winston-theme-hamburger-menu.git

Here is the method: Download bulma.min.css from Bulma CSS framework See https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.4/css/bulma.min.css See https://pakstech.com/blog/create-theme-layout/

Open the file and look for: Find "Segoe UI" (default font from Bulma theme) Replace by "Poppins" (default font from the Winston theme)

Find "3273dc" (default highlight color from Bulma theme) Replace by "7b16ff" (default highligh color from Winston theme)

Add bulma.min.css in /static/css

Open /themes/hugo-winston-theme/layouts/_partials/header.html and add the following lines <link rel="stylesheet" href="{{ absURL "/css/bulma.min.css" }}"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Remove

  <a class="header-logo" href="{{ .Site.BaseURL }}">{{ .Site.Title }}</a>
  <div class="menu-main">
    <ul>
        {{ $currentPage := . }}
        {{ range .Site.Menus.main }}
            <li class="menu-item-{{ .Name | lower }}{{ if $currentPage.IsMenuCurrent "main" . }} active{{ end }}">
                <a href="{{ .URL | relLangURL }}">{{ .Name }}</a>
            </li>
        {{end}}
    </ul>
  </div>

And replace by (note that I am changing "logo" with "header-logo" to match Winston nomenclatura):

<nav class="navbar" role="navigation">
       <div class="container">
           <div class="navbar-brand">
               <a href="/" title="home" class="navbar-item">
                   <span class="header-logo"><h1>{{ .Site.Title }}</h1></span>
               </a>
               {{ range .Site.Menus.social }}
               <a href="{{ .URL }}" class="navbar-item is-hidden-desktop" title="{{ .Name }}"><span
                       class="icon">{{ .Pre }}</span></a>
               {{ end }}
               <a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false">
                   <span aria-hidden="true"></span>
                   <span aria-hidden="true"></span>
                   <span aria-hidden="true"></span>
               </a>
           </div>
           <div class="navbar-menu">
               <div class="navbar-start">
                   {{ range .Site.Menus.main }}
                   <a href="{{ .URL }}" class="navbar-item">{{ .Name }}</a>
                   {{ end }}
               </div>
               <div class="navbar-end">
                   {{ range .Site.Menus.social }}
                   <a href="{{ .URL }}" class="navbar-item is-hidden-touch" title="{{ .Name }}"><span
                           class="icon">{{ .Pre }}</span></a>
                   {{ end }}
               </div>
           </div>
       </div>
   </nav>
   <script>
       $(document).ready(function () {
           $(".navbar-burger").click(function () {
               $(".navbar-burger").toggleClass("is-active");
               $(".navbar-menu").toggleClass("is-active");
           })
       })
   </script>

Go to config.toml and add:

[[menu.main]]
  name = "Home"
  url = "/"

[[menu.main]]
  name = "Posts"
  url = "/posts"

[[menu.main]]
  name = "About"
  url = "/pages/about"

I hope that helps!

[JugglerX]

I have added a mobile menu