Docs

[Super]

Hi There.
I wondered if you could help with a three questions I have.

1) I have two columns above and below each other, I’m trying to decrease the padding between them. Does X set a default value for padding of the top and the bottom of columns? and how can I change the setting?

2) The design of the site has a high nav bar and when the browser window shrinks the nav menu wraps under the logo and then under the text again. How can I set it so the nav bar items move closer together to start with and then the text size shrinks to fit them? I don’t want them to wrap.

3) Is it possible to change the thickness of the line under the hovered nav bar link? How?

[Rupok]

Hi there,

Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

[Super]

This reply has been marked as private.

[Rue Nel]

Hello There,

Thanks for providing the information.

1] Please please edit your page in Cornerstone and insert the following custom css in the settings tab, Settings > Custom CSS

.x-text p {
    margin-bottom: 10px;
}

Feel free to adjust the bottom margin.

2] To resolve this, please add the following css code in the customizer, Appearance > Customize > Custom > CSS

@media(max-width: 1200px){
  .x-navbar .desktop .x-nav > li > a:not(.x-btn-navbar-woocommerce) {
    padding-left: 25px;
    padding-right: 25px;
  }
}

3] To change the thickness of the line under the hovered nav bar link, please add the following css code in the customizer, Appearance > Customize > Custom > CSS

.x-navbar .desktop .x-nav > li > a:hover > span, 
.x-navbar .desktop .x-nav > li.x-active > a > span, 
.x-navbar .desktop .x-nav > li.current-menu-item > a > span {
    box-shadow: 0 4px 0 0 #414042;
}

Hope this helps. Please let us know how it goes.

[Super]

That’s perfect.
Thank you so much.

One question.
regarding question 2.

When I shrink the browser, after a certain point it jumps to the mobile hamburger menu.

Is it possible to make the nav bar links get smaller in size instead as the browser gets smaller instead of the hamburger menu appearing?

[Paul R]

Hi,

To achieve that, you can add this under Custom > Edit Global CSS in the Customizer.

@media (max-width: 979px) {
.masthead-inline .x-btn-navbar {
    display:none;
}

.x-nav-wrap.desktop {
    display: block;
}

.x-navbar .desktop .x-nav > li > a {
    font-size: 16px;
}
}

@media (max-width: 600px) {

.x-navbar .desktop .x-nav > li > a {
    padding:90px 5px 0;
    font-size: 12px;
}
}

Hope that helps.

[Super]

Thanks,
This works. However the nav bar starts to wrap again when it gets to a mobile size.

I’d like to keep the links on the same line if possible.
Perhaps they could just move under the logo and then the logo will center above them.

Is this possible?

[Rahul]

Hey There,

Thanks for writing back!

Try adding this CSS at Appereance > Customizer > Custom > CSS :

.x-navbar .desktop .x-nav>li>a {
   line-height: 2; 
}

See attached!

Let us know how this goes!

[Author]

Posts