Docs

[simon q]

Hello X-Theme Staff

Love the theme, have 3 licenses so far and counting. The new Cornerstone is brilliant and looking forward to this big 1st June 2016 announcement 🙂

Okay so what I’d like help with is three things.

1) I want the sticky header to get less height when you scroll down and also the logo to go a little smaller.

2) On the home page on the first section under the header where it says “Learn English on Skype with an expert teacher.
Fast results, quick learner, any time, anywhere.” there is a background image of a man speaking to someone on Skype on an iPad. When you reduce the viewport size down to less than say 1070 px wide, the background image starts to repeat. What I’d like is the background image to not repeat and increase its’ width so it fills the entire height of the container. Even if parts of the sides of the image are cut off, I don’t mind that obviously somethings gotta give.

3) This when I reduce the viewport size smaller than 1060 px wide the nav menu gets pushed under the logo. What I’d like is to make the nav menu and logo responsive (get smaller) so they fit nicely in the header for as long as possible. Hamburger menus are great but I’d like the nav menu to show on the header for as long as possible.

Thanks a million.

https://skypeschooloflanguage.com/

[simon q]

This reply has been marked as private.

[Friech]

Hi There,

Thanks for writing in! #1 You can add this under Custom > JavaScript in the Customizer.

jQuery(document).ready(function($) {
  $(window).scroll(function() {
    var scrollPos = $(window).scrollTop();
        navbar = $('.x-navbar');

    if (scrollPos > 50) {
      navbar.addClass('alt-class');
    } else {
      navbar.removeClass('alt-class');
    }
  });
});

And this on Custom CSS

.alt-class .x-brand {max-width: 280px;margin-top: 0;}
.alt-class .desktop .x-nav > li > a {padding-top: 30px; height: 80px; }
.alt-class .menu-item-66 a {padding-top: 10px !important;}
.alt-class .x-navbar-inner {min-height: 75px;}

#2 On that section’s STYLE field, please add this line of css.

background-size: cover;background-repeat: no-repeat;

#3 Add this on your Custom CSS, this would reduce each menu item side padding on screen width 980px to 1150px.

@media (min-width:  980px) and (max-width: 1150px)  {
    	.x-navbar .desktop .x-nav > li > a:not(.x-btn-navbar-woocommerce) {
		    padding-left: 5px;
		    padding-right: 5px;
		}
    }

Hope it helps, Cheers!

[simon q]

Yip that worked PERFECTLY

Thank you thank you thank you

[Rahul]

You are most welcome. Let us know if you need any further help.

Have fun with your X!

[Author]

Posts