I like the way my site is looking - especially on a desktop, but on a phone, the menu above takes a lot of space. Does anyone know a way to collapse that into one of those collapsible menu icons on the top right (the kind with horizontal lines)?
Is it just a simple code or???
Thanks!
This would be done with a combination of JS and CSS and isn’t necessarily Hugo specific. Somebody may be able to help you on the forums if you share your source code:)
Hi, I’m the author of the Vanilla theme you’re using. The menu is currently implemented using bootstrap navs.
If you want a collapsible menu, you’ll need to override the theme’s nav partial and make it a bootstrap navbar
I really like your theme! Thanks for your help!!!
Another option that would be very helpful for me would be to just display the icons in the menu bar, but not the text. That would free up a ton of space. Can that easily be done?
I can leave one text label blank, and it works, but I cannot have more than one blank label. If I have one more than one blank label, the icons start disappearing.
Thanks 
If you just want to display the icons, you can override the nav partial (linked above) then edit this code:
{{ $text := print $icon " " .Name | safeHTML }}
To be:
{{ $text := $icon | safeHTML }}Perfect!!! I’ll give that a go tonight!
That works!
Could I have two of these Navbars? One on top for pages of my blog and one on the bottom above the attribution for social links? Is there a simple code I can put down there and then use the same menu structure?
What you want is possible. I’ll let you figure it out though since this is beyond the scope of normal theme questions, and it’ll be a good hugo learning experience for you 
I’ll give some hints since I’m feeling generous.
(1) Create another menu in your config file. Let’s say instead of nav it’s named social
(2) In the theme’s footer partial, copy the same menu-related code from the nav partial, but instead of
{{ range .Site.Menus.nav }}
Do
{{ range .Site.Menus.social }}Thanks! Late here, but I’ll try it tomorrow. Tonight’s project has been trying to set up the site on AWS - ughh!
Thank you for spelling that out.
It works, I can get the second menu and configure it just fine, but the top menu disappears the moment I put in the second menu. I can’t seem to figure out how to prevent that from happening.
You likely have your menu configured incorrectly in your config file.
As an example, you’ll wanna do something like this. Notice the first two menu items are nav, the second two are social
[menu]
[[menu.nav]]
name = "Home"
pre = "home"
url = "/"
weight = 1
[[menu.nav]]
name = "Blog"
pre = "edit"
url = "/post/"
weight = 2
[[menu.social]]
name = "RSS"
pre = "rss"
url = "/index.xml"
weight = 1
[[menu.social]]
name = "YouTube"
pre = "youtube"
url = "https://www.youtube.com/"
weight = 2
menu:
nav:
- name: Home
pre: home
url: /
weight: 1
- name: Blog
pre: edit
url: /post/
weight: 2
social:
- name: RSS
pre: rss
url: /index.xml
weight: 1
- name: YouTube
pre: youtube
url: https://www.youtube.com/
weight: 2
Got it! Thanks!!!
What’s your site? Am curious to see it
Thanks for all your help!
I’m really excited about the image gallery in the sample post. That’s a feature that I really love!
Now to get my Wordpress moved over to Hugo… what could possibly go wrong?
There’s one additional tweak I’d like to make, but can’t figure out. There’s more space at the bottom of the post/article/page/etc. than there is a the top. Is there an easy way to shrink that space just a tad?
In the style partial, decrease the margin-bottom value:
#main {
margin-top: 1em;
margin-bottom: 4em;
}Great! That did the trick!!!
I made the top 2 and the bottom 3. I can see why you left more space at the bottom. BTW, just did a google speed test on the homepage. 99% Wow!
Yeah it looks cramped if there isn’t enough bottom margin.
Nice. Yeah if you have the includeBootstrapJs param disabled then the only other major resource in a web request is the minified bootstrap CSS.