Header Margin (Easy Mobile Banking Template)

[jonathanrockett]

Hi Guys, a couple questions… I’ve set up this header/menu and can’t seem to find where to adjust the spacing/margin below the ‘Bar’ - See here:

https://mikesawchuk.sizzlingdigital.com/media/

You can see the header overlaps the page content, and I could add spacing to the top of every page, but that seems sloppy. I was looking for a way to add margin at the bottom of the header bar, so the page content isn’t hidden behind it, but can’t seem to figure it out…

Second, I am trying to adjust the background upper layer (the orange part) here:

When I select Background Layers > Upper > Color and change the color… it doesn’t change - Even though when I select ‘None’ for the upper layer the color overlay disappears:

Finally, I can’t find where to adjust the Content Modal Area icon color… I can change the graphic and color (inside the circle), but can’t seem to find what controls the whole graphic…

Thanks for the help as always!

[tristup]

Hi @jonathanrockett,

Thanks for reaching out.
It seems that you have selected Masonry layout for the Blog Page and that is why you need to adjust the margin for content area. I would suggest you add the following custom CSS code into the Theme Options > CSS.

.blog .x-container.offset
{
    margin-top: 160px !important;
}

I have also found that you have selected the Masonry layout for the Blog Page and there is a ongoing issue is affecting your page, I went ahead and added the following code into your Theme Options > JS and now the page is showing correctly.

if (window.jQuery.xIsotope) window.jQuery.xIsotope.settings.animationEngine = 'css';

NOTE: The above issue has been already fixed in the upcoming release.

Regarding the Content Area Modal icon, it is not clear what exactly you are trying to find, can you please elaborate a bit more?

Thanks

[jonathanrockett]

Hey @tristup - The CSS for the Blog page (below) worked well… Thanks!

.blog .x-container.offset
{
margin-top: 160px !important;
}

The issue is on every page however, including Blog Category pages - for example: https://mikesawchuk.sizzlingdigital.com/consulting/
https://mikesawchuk.sizzlingdigital.com/category/video/
So what would the CSS be to call out all pages and posts/types?

Regarding the Content Modal element question, never mind, I realized it’s the legacy modal element… I just replaced it with the newer element ‘Modal’ - all set.

The background issue:

The header template default has an Upper Background color (orange) layer set in Bar 2, but when I change the color (as you can see in image 1), it doesn’t change… Yet, when I set it to ‘none’, it disappears (image 2), so it seems that’s where it’s controlled, but isn’t changing color…

[tristup]

Hi @jonathanrockett,

If that is the case, please add the you can add the Top margin to the Row of the specific pages where you are having this issue. Please find the following screenshot describing the setting.

Hope it helps.
Thanks

[jonathanrockett]

Hi @tristup,

I can add a Top Margin for most pages, but it doesn’t help with other system-generated pages like I mentioned above re: blog category pages such as:

https://mikesawchuk.sizzlingdigital.com/category/video/

Also, you didn’t address the other issue regarding the Background Upper Layer… Please see thread and screenshots from my last message…

Thank you.

[ruenel]

Hello @jonathanrockett,

The margin is needed because your Bar element is positioned as “Absolute”. To make sure that you custom CSS apply to all the pages site wide, you can remove the .blog in the CSS code.

.x-container.offset{
    margin-top: 160px !important;
}

or you can use .site instead of the .blog on the CSS code.

With regards to the background layer, it is added using an inline element CSS in the Bar 2 element.

This is the custom CSS code that was added:

$el .x-bg-layer-upper-color {
  background: linear-gradient(90deg, #ef7f6c 23%, transparent 23%) !important;
}

@media(max-width: 767px){ 
   $el .x-bg-layer-upper-color {
      background: linear-gradient(0deg,#ef7f6c 18%,transparent 16%) !important;
  }
}

Feel free to edit the code above to change the color.

Kindly let us know how it goes.

[jonathanrockett]

Hi @ruenel - Thanks for the help on this…

I didn’t think to look for preexisting custom CSS in the template (duh) - I was able to sort out the upper layer background color issue and will play with it.

For the issue with the Absolute position set for the header Bar, I added your suggested CSS (below) and it works on the system generated pages like blog and blog category pages (for example https://mikesawchuk.sizzlingdigital.com/category/articles/) but it doesn’t seem to work on the other standard pages (see for example https://mikesawchuk.sizzlingdigital.com/contact/).

I added:

.x-container.offset{
margin-top: 160px !important;
}

and also tried with .site:

.site .x-container.offset{
margin-top: 160px !important;
}

I tried adding it in the Header CSS as well as Global CSS (note, there are 2 separate headers - one assigned to just the homepage and the other assigned to all other pages, so I tried all CSS variation on each individual Header CSS as well)…

So at this point, it’s working on the blog and blog category pages, but now of the other pages - Thoughts on this?..

Thanks again!

[ruenel]

Hello @jonathanrockett,

Kindly update your CSS code and use this instead:

.site .x-container.offset,
.site > .x-main {
    margin-top: 160px !important;
}

Cheers.

[jonathanrockett]

That worked great @ruenel! Thank you!

[marc_a]

Hey @jonathanrockett,

You’re welcome and we’re glad that my colleague was able to help you with your issue! If you have any other concerns or clarifications regarding our theme features, feel free to open up a new thread.

Thank you.