QUARK - CSS missing for parallax?

Downloaded the latest version of Quark (new joomla installation + update Joomla + update QUARK template).
Read the Quark Documentation for the Frontpage Modules.
Replace some of the FRONTPAGE images and text. Everything is looking fine... until I get to the Frontpage Parallax Image section

If I resize my browser window, the title (in CAPS) is not correct compared to the online demo.

Capture1.JPG

Capture2.JPG

Problems are:
1) Text size of title is overlaying and too large (see demo)
2) Transparent background is full width (as oppose to the demo where the is padding to see the background image
3) The text "Lorem ipsum dolor sit amet, " got too much padding

It seems the QUARK template is missing CSS entries in mobile.css small.destop.css small.tablet.css or somehow these CSS are not working.
The Template RESPONSIVE LAYOUT is enabled.
Can you please help?
Thank you.
Jean

Try to recompile the template in the template manager by advance setting.

Thank you. That seems to be working.
Now if only the fixed menu could work! As soon as I scroll down past the header, the text (logo) in the menu is shifting. And as I am using a dark background for the fixed menu, the mobile menu icon (3 horizontal bar) are black... just cannot make them white.

Hi

For the menu make sure for the pages with dark header You use a page class suffix: "dark-bg", this will trigger white menu. Here example of how to use page class suffixes in our templates: https://www.gavick.com/documentation/jo ... omla-pages

For the other tasks I would need to see Your website. Please tell me the url to it.

I will check the link you sent, and test it later tomorrow, but for now, I cannot make the menu fixed with a dark green background; it does "shift" up and down when in tablet/mobile mode.
I made the header height 70% to help for the frontpage and use the following code to see the menu. Is there something to fix the "shift" and menu color?
Thank you in advance.
Jean
http://dev.foxwoodskennel.com/

Code: Select all

#gkHeaderMod > .parallax-img.gk-vertical {
  height: 70%;
}
#gkHeaderMod {
  background: #030;
}
#gkLogo.text {
  color: #fff;
}
#gkHeaderNav .gkMainMenu .gkmenu > li > a,
#gkHeaderNav .gkMainMenu .gkmenu > li > span {
  color: #fff;
}
#gkMobileMenu span {
  background: #030;
  padding: 5px;
  color: #fff;
}

Please add this code to override.css and make sure override is enabled in template settings.

Code: Select all

@media only screen and (max-width:1040px) {
#gkHeader .gk-fixed-nav #gkMobileMenu {
    margin-top: 70px !important;
}
}


Thank you.

Hi


Glad I could help.
---
If You were satisfied with our support please let other users know on Twitter: http://twitter.com/gavickpro or Facebook: http://www.facebook.com/gavickpro