App Page : Menu / Space Between Sections / Device Sliders

[pragmacloud]

Menu / Space between sections:

I am facing issue with Menu on App Page. When clicks on menu it should got to the corresponding section on the same page. It is working but to see the corresponding section I need to scroll up 2 lines, To avoid this I have added <br/> and padding-top then screen not looks good with more space between each section.

Device Sliders :

Device sliding images are not synchronizing with the content slider.

Can you please check the http://www.pragma.cloud/products-2/ page and please suggest me the solution.

Thanks,
Pragma.Cloud

[Raghavendra]

You need to provide unique ids for all of the sliders (you are repeating features-slider and features-slider1) so that the sync happens right. Pls focus on ids of tab slider, mac slider shortcodes and sync attribute of the tab slider shortcode.

Regarding the spacing issue, the logo for the site is making the sticky menu to grow. If you can reduce the height of the logo for the sticky menu, things will get better. Pls try the following custom CSS in theme options –

#site-logo, #header.sticky #site-logo {
 top: 0;
}

#header.sticky  #site-logo a img.standard-logo {
    max-width: 100px;
}

That should reveal more of your element when using the internal links.

[pragmacloud]

This reply has been marked as private.

[Veena]

Have you resolved this ?
If not pls share a temp login to your site as a private msg and also pls mention where and what the exact issue is .

Thanks.

[pragmacloud]

This reply has been marked as private.

[Veena]

The login details is not working it seems. Pls check .

[pragmacloud]

This reply has been marked as private.

[Veena]

This reply has been marked as private.

[Veena]

Pls give id for features sliders as #features-slider, #features-slider2, #features-slider3, #features-slider4, #features-slider5 and include the above custom CSS in themeoptions.If you need to add slider 6 then you need to add custom CSS like above for the 6th one also .I have included custom CSS up to features-slider5 .

[pragmacloud]

This reply has been marked as private.

[Veena]

You can try the below custom CSS in themeoptions –

#post-9024 .app-features-list {
    padding: 30px 0 30px;
}

[pragmacloud]

This reply has been marked as private.

[Alexander Schneider]

Hi Veena, refering to your earlier post: including a third features slider incl. iphone slider crashes design of icons.
Could you please re-share the custom CSS to include in themeoptions? You were mentioning “include the above custome CSS”, but could not find it in the forum. Maybe you set it to private?
Thanks so much, Alex

Pls give id for features sliders as #features-slider, #features-slider2, #features-slider3, #features-slider4, #features-slider5 and include the above custom CSS in themeoptions.If you need to add slider 6 then you need to add custom CSS like above for the 6th one also .I have included custom CSS up to features-slider5 .

[Veena]

This was the custom CSS –

#features-slider, #services-slider, #features-slider2, #features-slider3, #features-slider4, #features-slider5 {
  vertical-align: middle; }
  #features-slider ul.tab-list, #services-slider ul.tab-list, #features-slider2 ul.tab-list,#features-slider3 ul.tab-list, #features-slider4 ul.tab-list, #features-slider5 ul.tab-list {
    border: none;
    margin: 0 0 20px 0; }
    #features-slider ul.tab-list li, #services-slider ul.tab-list li, #features-slider2 ul.tab-list li {
      margin: 0 50px 0 0; }
      @media only screen and (max-width: 1140px) {
        #features-slider ul.tab-list li, #services-slider ul.tab-list li, #features-slider2 ul.tab-list li, #features-slider3 ul.tab-list li, #features-slider4 ul.tab-list li, #features-slider5 ul.tab-list li {
          margin: 0 25px 0 0; } }
      @media only screen and (max-width: 479px) {
        #features-slider ul.tab-list li, #services-slider ul.tab-list li, #features-slider2 ul.tab-list li, #features-slider3 ul.tab-list li, #features-slider4 ul.tab-list li, #features-slider5 ul.tab-list li {
          margin: 0 25px 0 0; } }
      #features-slider ul.tab-list li a, #services-slider ul.tab-list li a, #features-slider2 ul.tab-list li a, #features-slider3 ul.tab-list li a, #features-slider4 ul.tab-list li a, #features-slider5 ul.tab-list li a {
        text-align: center; }
        #features-slider ul.tab-list li a i, #features-slider ul.tab-list li a span, #services-slider ul.tab-list li a i, #services-slider ul.tab-list li a span, #features-slider2 ul.tab-list li a i, #features-slider2 ul.tab-list li a span , #features-slider3 ul.tab-list li a i, #features-slider3 ul.tab-list li a span , #features-slider4 ul.tab-list li a i, #features-slider4 ul.tab-list li a span , #features-slider5 ul.tab-list li a i, #features-slider5 ul.tab-list li a span {
          -webkit-transition: color 0.4s ease-in-out 0s;
          -moz-transition: color 0.4s ease-in-out 0s;
          -ms-transition: color 0.4s ease-in-out 0s;
          transition: color 0.4s ease-in-out 0s; }
        #features-slider ul.tab-list li a i, #services-slider ul.tab-list li a i, #features-slider2 ul.tab-list li a i, #features-slider3 ul.tab-list li a i, #features-slider4 ul.tab-list li a i, #features-slider5 ul.tab-list li a i {
          font-size: 60px;
          color: #bbb; }
          @media only screen and (max-width: 767px) {
            #features-slider ul.tab-list li a i, #services-slider ul.tab-list li a i, #features-slider2 ul.tab-list li a i, #features-slider3 ul.tab-list li a i, #features-slider4 ul.tab-list li a i, #features-slider5 ul.tab-list li a i  {
              font-size: 40px; } }
        #features-slider ul.tab-list li a span, #services-slider ul.tab-list li a span, #features-slider2 ul.tab-list li a span, #features-slider3 ul.tab-list li a span, #features-slider4 ul.tab-list li a span, #features-slider5 ul.tab-list li a span {
          display: block;
          font-size: 16px;
          line-height: 24px;
          font-weight: normal;
          color: #aaa;
          margin-bottom: 30px;
          text-transform: uppercase; }
          @media only screen and (max-width: 479px) {
            #features-slider ul.tab-list li a span, #services-slider ul.tab-list li a span, #features-slider2 ul.tab-list li a span, #features-slider3 ul.tab-list li a span, #features-slider4 ul.tab-list li a span, #features-slider5 ul.tab-list li a span {
              font-size: 13px;
              line-height: 22px; } }
      #features-slider ul.tab-list li a:hover i, #features-slider ul.tab-list li a:hover span, #services-slider ul.tab-list li a:hover i, #services-slider ul.tab-list li a:hover span, #features-slider2 ul.tab-list li a:hover i, #features-slider2 ul.tab-list li a:hover span, #features-slider3 ul.tab-list li a:hover i, #features-slider3 ul.tab-list li a:hover span, #features-slider4 ul.tab-list li a:hover i, #features-slider4 ul.tab-list li a:hover span, #features-slider5 ul.tab-list li a:hover i, #features-slider5 ul.tab-list li a:hover span {
        color: #888; }
      #features-slider ul.tab-list li a.visible, #features-slider ul.tab-list li a.flex-active, #services-slider ul.tab-list li a.visible, #services-slider ul.tab-list li a.flex-active, #features-slider2 ul.tab-list li a.visible, #features-slider2 ul.tab-list li a.flex-active, #features-slider3 ul.tab-list li a.visible, #features-slider3 ul.tab-list li a.flex-active, #features-slider4 ul.tab-list li a.visible, #features-slider4 ul.tab-list li a.flex-active, #features-slider5 ul.tab-list li a.visible, #features-slider5 ul.tab-list li a.flex-active {
        border: none; }
        #features-slider ul.tab-list li a.visible i, #features-slider ul.tab-list li a.visible span, #features-slider ul.tab-list li a.flex-active i, #features-slider ul.tab-list li a.flex-active span, #services-slider ul.tab-list li a.visible i, #services-slider ul.tab-list li a.visible span, #services-slider ul.tab-list li a.flex-active i, #services-slider ul.tab-list li a.flex-active span, #features-slider2 ul.tab-list li a.visible i, #features-slider2 ul.tab-list li a.visible span, #features-slider2 ul.tab-list li a.flex-active i, #features-slider2 ul.tab-list li a.flex-active span,#features-slider3 ul.tab-list li a.visible i, #features-slider3 ul.tab-list li a.visible span, #features-slider3 ul.tab-list li a.flex-active i, #features-slider3 ul.tab-list li a.flex-active span,#features-slider4 ul.tab-list li a.visible i, #features-slider4 ul.tab-list li a.visible span, #features-slider4 ul.tab-list li a.flex-active i, #features-slider4 ul.tab-list li a.flex-active span,#features-slider5 ul.tab-list li a.visible i, #features-slider5 ul.tab-list li a.visible span, #features-slider5 ul.tab-list li a.flex-active i, #features-slider5 ul.tab-list li a.flex-active span,  {
          color: #e84a52; }

[Alexander Schneider]

Great, thank you very much. Works perfectly!

Another question:
We are using the Polylang Plugin to manage multilanguage of the site. There is only one (hopefully minor) issue:
We use the language switcher in the header menu, with flag-icon only. When using the option “display language-name” alignment is fine, but using the flag, it is top-aligned instead of vertically centered. How can this be fixed?

Thanks a lot!
Alex

[Author]

Posts