How to add gaps (top and bottom) to columns on mobile version? + change menu bar text color on scroll?

Support
#1

Question 1)
So I had asked a similar question some time ago about removing gaps from margin less columns, I tried to re-engineer the code given at that time “@media screen and (max-width: 767px) {
.x-section .x-container.marginless-columns .x-text {
margin: 0;
}
}”

to work for what I want but I couldn’t figure it out… My website is easystartup.net: I have included screen shots,

So in the mobile version I want there to be spacing on the bottom and top of each of the containers so they are not touching and overlapping, also if it’s possible to order them into rows of 2 when viewed on mobile devices instead of 1 ontop of 1 ontop of 1 etc… I have included a picture of the mobile version viewed on an iPhone showing the problem.

Question 2) On my website you will see in the top header to the left corner the initial logo image is black (for example logo1.png) and then when you scroll down and the pop up menu bar appears it replaces ‘logo1.png’ with ‘logo2.png’ in white, - is it possible to change the menu bar text color (the navigation text) also? So initially it would be black (for example) and when it re-appears as you scroll down in the sticky bar it could be white? (like the same effect of the logo)

Thank you again for all of your time and support and I look forward to hearing your answers. Theme.co is truly the #1 theme out there the support you guys giving has helped me grow as a developer. I literally put all of my clients into your product for their websites.

#2

Hello Will,

Please edit the columns and add this to the Element CSS of each column where you want a bottom margin added on mobile.

@media (max-width: 480px) {
  $el {
    margin-bottom: 45px !important;
  }
}

Please add this code in the Global CSS:

.x-bar-fixed.x-bar-is-visible .ubermenu-main .ubermenu-item-level-0 > .ubermenu-target,
.x-bar-fixed.x-bar-is-visible .x-anchor-text-primary {
    color: #fff !important;
}

Hope this helps.

#3

@Jade You’re a legend. Thank you so much. truly appreciated.

1 Like
#4

You’re always welcome!

Cheers.

#5

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.