Position: Sticky isn't working

[Z3R0]

Hi everyone facing an issue with Hugo.

I created a pricing table for our website but when in Hugo one of the sections that I made sticky doesn’t work on codepen it is working fine ( codepen link ). Here’s the link to the website. Arox Marketing

As far as I know, the code isn’t conflicting with any of the existing code. I don’t see any warnings or errors either so idk what’s wrong.

EDIT: I just noticed the humbarger menu only works on home and not on the other pages.

I saw in an other posts someone having the same issue with humbarger someone asked to baseURL so here it is also he was his theme wasn’t picking bootstrap.min.js but mine doesn’t show any 404 errors or warnings.

[razon]

It’s just a CSS issue, Hugo won’t change the styles. Remove the overflow-hidden from the main element then it works.

<div class="main overflow-hidden">...</div>

to

<div class="main">...</div>

For more advanced info, you can google it with keywords position sticky not working.

[Z3R0]

I did do a bit of research but I couldn’t find a solution. also not sure where are you getting the <div class"main overflow-hidden"> from

[razon]

@razon

Remove the overflow-hidden from the main element then it works.

<div class="main overflow-hidden">...</div>

to

<div class="main">...</div>

Since the parents has set the overflow as hidden.

also not sure where are you getting the <div class"main overflow-hidden"> from

It’s may be located in the base template, do a global search on site’s templates and theme templates.

[Z3R0]

It’s may be located in the base template, do a global search on site’s templates and theme templates.

okay Thanks, it was located in baseof.html it also fixed the issue, any idea about the hamburger issue

[razon]

Didn’t look into this, I’d suggest asking to the theme’s author to get quick respond.

Btw, you can also using CSS to override the main element, so that you dont need to change the base template.

.main {
    overflow: initial!important;
}

[Z3R0]

I am the author lol, for both the HTML version and the hugo theme. Idk much about hugo it’s like my way of learning **How to create hugo theme** when I can’t figure out something I ask here. however I did steal someone else’s design for though The nav works fine is the HTML version

Edit: The code for nav

<nav data-aos="zoom-out" data-aos-delay="800" class="navbar navbar-expand bg-body-tertiary">
    <div class="container header">
        <!-- Navbar Brand-->
        {{ if eq .Type "home" }}
        {{- partial "common/logohome.html" . -}}
        {{ else }}
        {{- partial "common/logoall.html" . -}}
        {{ end }}
        <div class="ml-auto"></div>
        <!-- Navbar -->
        <ul class="navbar-nav items">
            {{ range .Site.Menus.mainmenu }}
            <li class="nav-item">
                <a class="nav-link" href="{{ .URL }}">{{ .Name }}</a>
            </li>
            {{ end }}
            {{ range .Site.Menus.dropmenu }}
            {{ if .HasChildren }}
            <li class="nav-item dropdown">
                <a class="nav-link" href="#">Pages<i class="fas fa-angle-down ml-1"></i></a>
                <ul class="dropdown-menu">
                    {{ range .Children }}
                    <li class="nav-item"><a href="{{ .URL }}" class="nav-link">{{ .Name }}</a></li>
                    {{ end }}
                </ul>
            </li>
            {{ end }}
            {{ end }}
        </ul>
        <!-- Navbar Icons -->
        <ul class="navbar-nav icons">
            <!-- <li class="nav-item">
                    <a href="#" class="nav-link" data-toggle="modal" data-target="#search">
                        <i class="fas fa-search"></i>
                    </a>
                </li>-->
            <li class="nav-item social">
                <a href="https://www.facebook.com/aroxdigital" class="nav-link"><i class="fab fa-facebook-f"></i></a>
            </li>
            <li class="nav-item social">
                <a href="https://www.instagram.com/aroxmarketing/" class="nav-link"><i class="fab fa-instagram"></i></a>
            </li>
        </ul>

        <!-- Navbar Toggler -->
        <ul class="navbar-nav toggle">
            <li class="nav-item">
                <a href="#" class="nav-link" data-toggle="modal" data-target="#menu">
                    <i class="fas fa-bars toggle-icon m-0"></i>
                </a>
            </li>
        </ul>

        <!-- Navbar Action Button 
            <ul class="navbar-nav action">
                <li class="nav-item ml-3">
                    <a href="#" class="btn ml-lg-auto btn-bordered-white"><i
                            class="fas fa-paper-plane contact-icon mr-md-2"></i>Contact Us</a>
                </li>
            </ul>-->
    </div>
</nav>

Now both the pages use the same nav and I can’t see 404 files in the console either, I am confused

[razon]

Because you didn’t include the #menu HTML block in other pages except the homepage, so there isn’t content/modal to open.

[Z3R0]

again not sure what that means if you could provide hugo docs for reference that would great. hope you are talking about this, I have it in my .toml file

if so maybe I didn’t explain it correctly,

clicking on this button opens the menu only for the home page, it does nothing on any of the other pages.

[razon]

It’s not Hugo related, I mean the #menu HTML block wasn’t included on the pages except the homepage, that’s why the other pages not working.

[Z3R0]

oh lol I thought I put it in my baseof… It fixed Thanks again man.