Change all Break Points

Support
#1

Is there a section somewhere that I can adjust all my break point sizes or do I have to do it with global CSS?

#2

Hello There,

Thanks for posting in! The break points were coded in the stack stylings. Changing it to a different sizes will require complete recoding of the stack style.css. Could you please give further clarifications of what you have in mind?

Regards.

#3

I just wanted the break point for the two headers I have set to only display at this size to happen sooner.

#4

Hello There,

Well, in that case, please add a custom my-custom-bar ID and use a custom css to manipulate the display of the bar. You can use this:

@media(min-width: 768px) and max-width: 979px) {
  #my-custom-bar {
    display: block;
  }
}

Please keep in mind that this is just an example and will not work if you do not have a custom ID.

#5

Hmm. Seems about the same. I want the top header to last longer before it jumps to mobile or the left nav I created for really large screens.

#6

Hi again,

I went ahead and adjusted the break points of your header bars using hide during breakpoints option.

Please check your site now. Hope this helps!

#7

Great.Thanks.

How can I:

  1. Remove all the lines and bullets from this footer widget
  2. Make all the links #fff and #f8981c on hover
  3. Center all the menu items.
#8

Hello There,

Are you referring to this footer?

1.) The line is added as a line element. Please edit your custom footer and remove the line element. The bullets were added by a custom css which I think I am the one who gave you. Please remove this css if you want to remove the bullet;

.x-bar-footer .x-menu > li:after {
    content: "\2022";
    position: absolute;
    top: 20%;
    right: -5px;
    font-weight: bold;
    color: #f8981c;
}

2.) You mean your menu links? Please change the colors in your navigation inline settings. This can be found when you edit the custom footer.

3.) This is also in your custom footer builder. Click the navigation inline and change the Self Flex and Flex Layout.

Hope this helps.

#9

Sorry, I thought I uploaded a screen cap. This widget area that only appears on mobile.

#10

Hello There,

Thanks for providing the screenshot.

1.) To remove the bullets and lines, please add the following CSS code in the X > Theme Options > Global CSS (http://prntscr.com/evui3r)

.x-colophon .widget ul, 
.x-colophon .widget ol,
.x-colophon .widget_nav_menu ul li a, 
.x-colophon .widget_meta ul li a, 
.x-colophon .widget_pages ul li a {
    border: none;
    box-shadow: none;
}

.x-colophon .widget a:before, 
.x-colophon .widget a:after {
    display: none;
}

Please let us know if this works out for you.

#11

that kind of worked. I also need the text shadow removed and the links #fff and #f8981c on hover. remove any background effects also.

#12

Hello There,

Well in that case, please remove the code and have it updated. You can make use of this custom css instead:

.x-colophon .widget ul, 
.x-colophon .widget ol,
.x-colophon .widget_nav_menu ul li a, 
.x-colophon .widget_meta ul li a, 
.x-colophon .widget_pages ul li a {
    background-color: transparent !important;
    border: none;
    box-shadow: none;
    text-shadow: none;
}

.x-colophon .widget a:before, 
.x-colophon .widget a:after {
    display: none;
}

.x-colophon .widget ul li a {
    color: #fff;
}

.x-colophon .widget ul li.current-menu-item a,
.x-colophon .widget ul li a:hover {
    color: #f8981c;
}

We would loved to know if this has work for you. Thank you.

#13

Worked perfectly thank you!!!

#14

You are most welcome. :slight_smile:

#15

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.