HUGO

"active" class not working on nav menu in bootie docs theme (edited post)

#1

I’m using the bootie docs theme. After spending hours trying to get the active class to work on the nav links for my own site, I installed a brand new hugo site, downloaded the bootie docs theme, added a new page call “about” and a menu item for that page in config.toml, all according to the bootie docs documentation.

With that minimal site and NO changes to the theme, the “About” link in the menu is NOT highlighted as it is on the Bootie Docs demo site.

An inspection of the link on the demo site shows this:

  • About
    • 


    An inspection of the link on the new site shows this:
    

  • About
    • 


    The “active” class is NOT being recognized on the minimal site I created…
    

    The menu item in the config file is:
    

    [[params.mainMenu]]
    
name = "About"
    
link = “about/”
    

    The code from the partial/header.html file (unedited from the theme download) is:
    

  • Home
    • 
			{{ $url := .Permalink }}
			{{ with .Site.Params.mainMenu }}
				{{ range $menu := . }}
					{{ $itemUrl := printf "%s/%s" $baseUrl $menu.link }}
					
  • {{ $menu.name }}
    • 


    There appears to be a bug or something missing in the downloaded theme that exists in the code for the demo site.
    

    Can someone please point me to the theme creator to ask about or report this problem?
    

    Or if anyone knows what the problem is, please let me know.
    

    Thank you!
    
Kat
    
        
    

        

        
    
           
           
           
         
    

         
    
            
            
          
    

            
    
            
    

    
    
    
    
        
    
          

          
              
              
          #2
          
        
    
        
    
          
    I had the same problem.
    
I used
    

    3 x `  instead of 1
    
        
    

        

        
    
           
           
           
         
    

         
    
            
            
          
    


    
    
    
    
        
    
          

          
              
          #3
          
        
    
        
    
          
    I’m afraid I don’t understand your reply. Can you please elaborate on what you did and did it resolve the “active” class problem?
    
        
    

        

        
    
           
           
           
         
    

         
    
            
            
          
    


    
    
    
    
        
    
          

          
              
              
          #4
          
        
    
        
    
          
    To show your Code correct you have to wrap the Code-fragments in 3 BackTicks -->  Your Code
    
        
    

        

        
    
           
           
           
         
    

         
    
            
            
          
    


    
    
    
    
        
    
          

          
              
          #5
          
        
    
        
    
          
    Understood, thank you!
    

    I was hoping you had a solution to the actual problem, which appears to be a bug. I’ve emailed the theme developer.
    
        
    

        

        
    
           
           
           
         
    

         
    
            
            
          
    


    
    
    
    
        
    
          

          
              
          #6
          
        
    
        
    
          
    Hello,
    

    I’m the theme developer.
    
Thank you for your reporting.
    

    I’ll take a look into this problem.
    
        
    

        

        
    
           
           
           
         
    

         
    
            
            
          
    


    
    
    
    
        
    
          

          
              
          #7
          
        
    
        
    
          
    Delighted to hear that!  Please give an estimate for when you’ll be ready for us to test your solution.
    
        
    

        

        
    
           
           
           
         
    

         
    
            
            
          
    


    
    
    
    
        
    
          

          
              
          #8
          
        
    
        
    
          
    Hello,
    

    Thank you for all users of this theme.
    

    I apologize for my late working on this issue.
    

    After a short working, I found this is a known issue for local development.
    
Because Hugo appends / to .Site.BaseURL for local server, handling active link doesn’t work.
    

    But once you build and publish your site for configured domain, they will be treated well.
    
At least, my several sites using bootie-docs are working well.
    

    For future work, I plan to switch to Hugo’s built-in Menu system: https://gohugo.io/extras/menus/ from bootie-docs’ current implementation.
    

    The tracking issue is https://github.com/key-amb/hugo-theme-bootie-docs/issues/23
    

    Thank you.
    
        
    

        

        
    
           
           
           
         
    

         
    
            
            
          
    

            
    
            
    

    
    
    
    
        
    
          

          
              
          #9
          
        
    
        
    
          
    Hello again,
    

    

    For future work, I plan to switch to Hugo’s built-in Menu system – from bootie-docs’ current implementation.
    

    

    I just release this as Bootie Docs v1.3 – https://github.com/key-amb/hugo-theme-bootie-docs/pull/26 .
    

    After this change, “active” class works well both for local development and for published site.
    
I think this will fix your problems.
    

    Be carefull that you need to change your config.toml (or config.yaml) after updating Bootie Docs:
    

    i.e) [[params.mainMenu]] => [[menu.main]]
    

    I also updated the documentation: http://key-amb.github.io/bootie-docs-demo/usage/
    

    Thanks,