[Resolved] Section background color transparency

[Kristijan]

hi,

1.
I’m trying to add transparency to background color in sections
Here is what I’m using, but it’s not working, can you please correct:

.generate-section-"section name"{
background-color: rgba(158, 189, 171, 0.1);
}

2.
I’m using contained box type for sections.
For this section where I’m adding the background color, I’m using full-width box type (so the background color is full width).
How to have the content in full-width box type section aligned with the content in contained box type section?

thanks

[David]

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

[Kristijan]

where can I see the section number?

I’m using “Section label”, but apparently that’s not it..

thanks

[David]

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.

[Kristijan]

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

[David]

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

[Kristijan]

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

[Leo]

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.

[Kristijan]

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

[Leo]

Try this CSS and adjust the margin-left value:

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

[Kristijan]

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

[Leo]

– 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.

[Kristijan]

aha, got it

thank you very much, Leo!

[Leo]

No problem!

[Author]

Posts