[Resolved] Container width on some pages

[Bernhard]

Hi,
on some pages I want to use a floating page navigation. I need therefore on these pages some more blank space on the left, on desktop view approx 20px, on mobile view approx 15px.
How can I configure this?

[David]

Hi there

we could do this with some CSS and a media query. But how do you set which pages has the floating navigation? And how is that function added?

[David]

Hi there

we could do this with some CSS and a media query. But how do you set which pages has the floating navigation? And how is that function added?

[Bernhard]

Hi David,
I use the Float Menu Pro plugin for this function and I can select the page ID to add the menu.

[David]

So for example this CSS would apply some extra padding to the page you provided a link to:

.page-id-19865 .site-content {
    padding-left: 60px !important;
}

But that would mean specifying this CSS for every page you add the float menu to.
If the Plugin could add a class to the Body to identify the Float Menus presence then this would save a lot of aggro. Do you know if this is an option? Maybe the author can advise.

[Bernhard]

Hi David,
It works, thank you. I can address these pages with Elements which is a really great tool. So this is not a problem.
One thing is that I want to define a different padding for desktop and mobile. How can I do this?

[David]

Awesome – yes love Elements 🙂

So without the specific page class this CSS:

/* Desktop */
.site-content {
    padding-left: 60px !important;
}

/* Mobile */
@media (max-width: 768px) {
    .site-content {
        padding-left: 40px !important;
    }
}

[Bernhard]

Perfect, thank you 🙂

[David]

You’re welcome

[Author]

Posts