Docs

[nonprofitwork]

Building a site off of the Education Demo (http://demo.theme.co/education/)

How would I go about make the nav on mobiles fixed so that it remains at the top of the screen as users scroll the site?

Thanks for your time and help 🙂

[Darshana]

Hi there,

Thanks for writing in! Head over to Appearance -> Customize -> Header and set “Navbar Position” as Fixed Left.

Hope that helps.

[nonprofitwork]

Thanks for the speedy reply.

That solution won’t work. By doing that the nav bar on desktops is changed from fixed on the left to fixed on top.

I want to leave the desktop version of the left nav bar unchanged, while changing the mobile nav to fixed at the top.

[Nabeel A]

Hi again,

Can you please provide the URL so we can take a look?

Thanks!

[nonprofitwork]

The url to see the issue is http://demo.theme.co/education/
(I started the site I’m working on with the demo content of that theme and have made no changes to it)

The desktop version works great, it’s the mobile nav that I’d like to fix to the top.

[Joao]

Hi There,

Please add the following code to Appereance Customizer Custom CSS

@media (max-width: 979px) {
.x-navbar-fixed-top, .x-navbar-fixed-left, .x-navbar-fixed-right {
position: fixed;
}
}

Hope that helps,

Joao

[nonprofitwork]

It did not work. By putting that code in, the left bar nav bar (the one found on the desktop version) remains active on smaller and mobile screens.

[nonprofitwork]

This reply has been marked as private.

[Lely]

Hi There,

Thank you for the credentials.
Please update above CSS to this:

@media (max-width: 979px){
.x-navbar-fixed-top, .x-navbar-fixed-left, .x-navbar-fixed-right {
    position: fixed;
    width: 100% !important;
    bottom: initial;
}
}

See attached screenshot.

[nonprofitwork]

Thanks so much this works great, I really appreciate the help.

Is a way to add padding so that the nav does not lay overtop the first 70px of each pages content?

[Joao]

Hi There,

Please add the following code to Appereance Customizer Custom CSS

@media (max-width: 979px){
.x-header-landmark {
padding-top: 70px;
}
}

Hope that helps,

Joao

[nonprofitwork]

That solution won’t work because it only works on the specific page that has x-header-landmark on it.

I’m looking for a way to add make sure that the fixed nav does not fall on top of content at the top of all pages.

For example of the problem persisting see http://www.non-profit.work/example-x1/?page_id=14 (because it does not have x-header-landmark the solution will not work).

[nonprofitwork]

I found a solution by adding the following custom css

@media (max-width: 979px) {
.x-main.full, .x-main.left, .x-main.right, .x-sidebar.left, .x-sidebar.right {
    float: none;
    display: block;
    width: auto !important;
    margin-top: 70px;
}
}

Thank you for all the help 🙂

[Nabeel A]

Hi again,

Use this code instead:

@media screen and (max-width: 979px){
header.masthead.masthead-inline {
    min-height: 70px !important;
}
}

This should fix the issue. Let us know how this goes!

[Author]

Posts