Adding menu items to right side of the header.

[agoodfellow123]

Hello. I am not a web developer and this is my first time getting exposed to CSS and HTML but I tried to change some things on the theme. I semi successfully removed the aspect ratio limit (it still appears when I zoom in but looks fine when zoomed out):

However, one thing that really bothered me was the inability to add menus to the right side of the header instead of the default left side, here is what I tried so far:

header.html

<nav class="navbar navbar-inverse navbar-fixed-top">
    <div class="navbar-inner">
        <div class="container">
            <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"></button>
            <a class="brand" href="{{ .Site.BaseURL }}">Home</a>
            <div class="nav-collapse collapse">
                <ul class="nav">
                    {{ $currentPage := . }}
                    {{ range .Site.Menus.main }}
                        {{ if .HasChildren }}
                            <li class="{{ if $currentPage.HasMenuCurrent "main" . }}active{{ end }}">
                                <a href="#">
                                    {{ .Pre }}
                                    <span>{{ .Name }}</span>
                                </a>
                            </li>
                            <ul class="sub-menu">
                                {{ range .Children }}
                                    <li class="{{ if $currentPage.IsMenuCurrent "main" . }}active{{ end }}">
                                        <a href="{{ .URL }}">{{ .Name }}</a>
                                    </li>
                                {{ end }}
                            </ul>
                        {{ else }}
                            <li>
                                <a href="{{ .URL }}">
                                    {{ .Pre }}
                                    <span>{{ .Name }}</span>
                                </a>
                            </li>
                        {{ end }}
                    {{ end }}
                </ul>
            </div>
        </div>
    </div>

    <div class="rightnavbar-inner">
        <div class="container">
            <div class="rnav-collapse collapse">
                <ul class="rnav">
                    <li class="lang">
                        <a href={{"/fr"}}>FR</a>
                    </li>
                    {{ $currentPage := . }}
                    {{ range .Site.Menus.rmain }}
                        {{ if .HasChildren }}
                            <li class="{{ if $currentPage.HasMenuCurrent "rmain" . }}active{{ end }}">
                                <a href="#">
                                    {{ .Pre }}
                                    <span>{{ .Name }}</span>
                                </a>
                            </li>
                            <ul class="sub-menu">
                                {{ range .Children }}
                                    <li class="{{ if $currentPage.IsMenuCurrent "rmain" . }}active{{ end }}">
                                        <a href="{{ .URL }}">{{ .Name }}</a>
                                    </li>
                                {{ end }}
                            </ul>
                        {{ else }}
                            <li>
                                <a href="{{ .URL }}">
                                    {{ .Pre }}
                                    <span>{{ .Name }}</span>
                                </a>
                            </li>
                        {{ end }}
                    {{ end }}
                </ul>
            </div>
        </div>
    </div>

</nav>
`

And here is related part of the config.toml:

`[menu]
  # This displays buttons in the navbar to access your contents
  [[menu.main]]
    identifier = "about" # An unique identifier for the button
    name = "About"       # A display name for the button
    url = "/about/"      # The path to the content. It can lead to a single page (like here)
    weight = 10          # A number to order the buttons in the navbar

  [[menu.main]]
    identifier = "posts"
    name = "All posts"
    url = "/post/"       # The path can lead to a content folder too.
    weight = 20

    [[menu.rmain]]
    identifier = "en"
    name = "EN"
    url = "/en/"       # The path can lead to a content folder too.
    weight = 30

    [[menu.rmain]]
    identifier = "fr"
    name = "FR"
    url = "/fr/"       # The path can lead to a content folder too.
    weight = 30```

I also copied everything in bootstrap.css that starts with ".navbar" and renamed the duplicate ones to ".rightnavbar" here is some example:

```.rightnavbar .rnav {
  position: relative;
  left: 0;
  display: block;
  float: right;
  margin: 0 20px 0 0;
}

.rightnavbar .rnav.pull-right {
  float: right;
  margin-right: 0;
}

.rightnavbar .rnav > li {
  float: right
  padding-left: 0;
}

.rightnavbar .rnav > li > a {
  float: none;
  padding: 0 10px;
  color: #000000;
  text-decoration: none;
  text-shadow: 0;
}```

But doesn't matter what I do nothing works :/ any ideas? 

Also as an extra question lets say I want to have the fella.com site and just have english articles and english info pages but when I type fella.com/fr I want the site to turn french and only show french articles and info pages. Is this possible with hugo or should I get two separate domains?

[jmooring]

Reference: https://discourse.gohugo.io/t/40965

config.toml

[languages.en]
weight = 1
languageCode = 'en-US'
languageName = 'English'

[languages.de]
weight = 2
languageCode = 'de-DE'
languageName = 'Deutsch'

Override the header template

mkdir -p layouts/partials
cp themes/hugo.386/layouts/partials/header.html layouts/partials/

Then modify layouts/partials/header.html

diff --git a/layouts/partials/header.html b/layouts/partials/header.html
index 7fe2281..e3f2bf3 100644
--- a/layouts/partials/header.html
+++ b/layouts/partials/header.html
@@ -33,7 +33,12 @@
                         {{ end }}
                     {{ end }}
                 </ul>
+                <ul class="nav" style="float: right">
+                  {{ range .AllTranslations }}
+                    <li><a href="{{ .RelPermalink }}">{{ .Language.LanguageName }}</a></li>
+                  {{ end }}
+                </ul>
             </div>
         </div>
     </div>

The language switcher is available in both the collapsed and expanded menu. Perhaps @maxlefou can suggest a better way to do this.

[jmfergeau]

this version isn't really supported anymore since another revamp is in the way for the main reason that it uses Bootstrap in version 2. but feel free to make pull requests

[xnrdotone]

It works! Thank you. However, I couldn't manage to do the margin equal to "My New Hugo Site" here is what I tried: <ul class="nav" style="float: right" margin-right="-10px"> When I inspect the element it says the margin value was read from Bootstrap.css How do I overwrite that?

Edit: Nevermind I solved it like this: <ul class="nav" style="float: right; margin-right: -10px;">

[xnrdotone]

Also two new problems occured, I want language buttons to send you to the homepage of the language so this is what I done:

 {{ if .Language.LanguageName .Language.LanguageName.English}}
                    <li><a href="/">{{ .Language.LanguageName }}</a></li>
                    {{ else }}
                    <li><a href="/tr">{{ .Language.LanguageName }}</a></li>
                    {{ end }}

Sadly that doesn't seem like how that works.

Also on the mobile site this happens: