Docs

[nathanr_]

Hi,

#1 I have this problem with the header on a number of x sites, I don’t find the headers very responsive out of the box. How can I make the header shrink as the screen shrinks. At the moment as the screen shrinks on desktop eventually the nav menu goes beneath the logo leaving a big white space, the logo doesn’t respond to the screen right until the end.

Also on this site on the mobile there is a big white space beneath the logo in the header.

I have searched the forum but fixes only fix one aspect not the responsiveness of header as a whole

#2 In the footer on mobile is there a way you can alter the vertical space between the widgets, for example I want to make a larger space between the about widget and start of the footer but then reduce the space between the rest of the widgets, only on mobile

#3 I want to change the default writing at the top of the shop page and shop category pages. I would like to set it to H2 size in this colour rgb(58, 186, 203), centered with accent and with a space of 40px above and 30px below.

Thank you for your help
Nathan

[nathanr_]

This reply has been marked as private.

[Rupok]

Hi Nathan,

Thanks for writing in!

#1. You can add this under Custom > CSS in the Customizer.

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

I can’t see big white space for mobile though but you have set a min-height for the navbar :

.x-navbar-inner {
  min-height: 150px;
}

#2. You an add CSS like this :

@media only screen and (max-width: 767px) {
footer.x-colophon.top {
  padding-top: 50px;
}
}

#3. You can change the text from Customzier > {Stack Name} > Shop Title. You can use the following selector to change the styling :

.woocommerce .entry-title {
  color: rgb(58, 186, 203);
  padding-bottom: 30px;
  padding-top: 40px;
}

Hope this helps.

[nathanr_]

This reply has been marked as private.

[Nabeel A]

Hi again,

#2 I checked your site and the above code is not being applied, replace the previous code with this one:

@media screen and (max-width: 767px) {
footer.x-colophon.top {
  padding-top: 50px !important;
}
}

#3 It could be possible with custom development, but this would be outside the scope of support we can offer. You may wish to consult a developer to assist you with this. X is quite extensible with child themes, so there are plenty of possibilities.

Thanks for understanding. Take care!

[nathanr_]

OK thank you for your help 🙂

[Prasant Rai]

You are most welcome. 🙂

[Author]

Posts