Section background color transparency

Use the following CSS instead - its an ID not a class. Just change the section number accordingly. I assume you want to color each section differently.

#generate-section-1 {
    background-color: rgba(158, 189, 171, 0.1);
}

This will colour the background of the section and not the container so will resolve point 2

where can I see the section number?

I'm using "Section label", but apparently that's not it..

thanks

The section number is the order it is in the stack.
For more control add a Custom Class to the section in setting. For example:

db-bg

Then apply the CSS

.db-bg {
    background-color: rgba(158, 189, 171, 0.1);
}

Then you can apply that class to any section you want. Note when entering custom classes you dont put the period in front of the class name.

yes, this works fine, but it colors only the contained part of the section.

I would like to color the full width, but the content to stay in "contained" mode, so it is aligned with the content in above sections. Is this achievable?

thanks

Just change your section settings
Box Type: Full Width
Inner Box Type: Contained

I know about that, but then what happens is:

- I set all sections to full width
- my primary navigation "Inner Navigation Width" is set to contained
- in that case, content in sections is not aligned vertically with the left side of the primary navigation

- if I set primary navigation "Inner Navigation Width" to full width, I can't set the padding of primary nav to be aligned with content in sections

the page is:
link

please help

Hi there,

It's not lining up because there are left and right padding added for sections. Try this CSS:

.generate-sections-inside-container {
    padding-left: 0;
    padding-right: 0;
}

Then the menu container should be lined up with the sections container: https://postimg.org/image/486u86gej/8322e1ce/

If you are wanting the menu text to line up with the page title, then you can add left padding in the code above.

yes, I want menu text to be lined up with the page title.
but doesn't matter how much value I add to the left padding, page title moves to the left only a bit and it won't go any further (even when I add !important after the padding value)

please see

link

Try this CSS and adjust the margin-left value:

.generate-sections-inside-container {
    padding-left: 0;
    padding-right: 0;
    margin-left: 520px;
}

yes, it's working, thanks

- can you please add an exception for this code for mobile (the content on mobile is pushed away from the screen)

- for some reason, on some pages ("Blog", "Now" and some other confirmation pages not in the menu),
Primary navigation is misaligned compared to other pages - slightly to the right:
link

can you please take a look on this

- To make it desktop only:

@media (min-width:769px) {
    .generate-sections-inside-container {
        padding-left: 0;
        padding-right: 0;
        margin-left: 520px;
    }
}

- Scroll bar width needs to be taken into account as well for pages that are not long enough for it to appear.

aha, got it

thank you very much, Leo!

No problem!