Docs

[venya]

Hello,

1. I want to remove the breadcrumb bar from my home page. I managed to remove the text, but not the bar itself. Tried variations of .page-id-3899, .home, .x-breadcrumb-wrap {display:none!important;} I still have this grey horizontal bar.

2. I have an issue where at the top of the screen when scrolling down it will suddenly jump several steps. I’ve noticed this also in mobile. I’d like to remove this just and restore smooth scrolling…

Can be seen here:
http://www.bennyfromtheblock.com/product-category/new-arrivals/

3. I tried to make input boxes on two widgets in my sidebar to 100% width.
(http://www.bennyfromtheblock.com/product-category/new-arrivals/)
I got this to work with code below, but it also decreased the font size of the giant font used main Nav search. How can I fix these sidebars and keep search font as is?

input#s,input#mce-EMAIL {
font-size:90%!important;width: 100% !important;}

4. I have a section of product images on home in cornerstone. How can I get the images to appear in 2 columns for mobile? I tried reducing the size but they still appear 1 per row…

5. Nav Bar menu – In checking the responsiveness of the site, on smaller desktop screens (11-13-15”) the menu gets pushed to the left, which the collides with the logo and nearly doubles the height of the navbar. What can be done prevent this? Make logo responsive? Adjust menu position? (see photos).

Thank you.

[venya]

This reply has been marked as private.

[Paul R]

Hi,

Thanks for writing in!

1. You can disable the breadcrumbs under Header > MISCELLANEOUS > Breadcrumbs in the customizer.

2. To fix it, you can add this in Appearance > Customize > Custom > Edit Global CSS

body.x-navbar-fixed-top-active .x-navbar-wrap {
    height: 144px !important;
}

3. Please change your code to this.

input#s,input#mce-EMAIL {
   width: 100% !important;
}

4. I am not sure which products you are referring to. Can you provide us a screenshot.

5. Your menu is too long to fit. We can make the mobile menu appear earlier by adding the code below in Appearance > Customize > Custom > Edit Global CSS

@media (max-width: 1441px) {
   .x-navbar .x-nav-wrap.desktop {
        display:none;
   }

   .x-navbar .x-nav-wrap.mobile.in {
        display:block !important;
   }

   .masthead-inline .x-btn-navbar {
      display: block;
      float: right;
   }
}

Hope that helps.

[venya]

This reply has been marked as private.

[Christopher]

Hi there,

#1 Please find this code and remove it :

body.x-navbar-fixed-top-active .x-navbar-wrap {
    height: 144px !important;
}

Please remove <br> tag, see the attachment.

#4 Please add this :

@media (max-width:767px){
.x-column.x-sm.x-1-5 {
    width: 46%;
    float: left;
    margin-right: 4%;  
}
}

Hope it helps.

[venya]

Hello,

Deleting the #1 code did not remove the navbar wrap from the homepage, and brought back the issue that I had with the top of the screen jumping down when scrolling (described in top of thread).

I would like to remove the grey navbar wrap bar on my homepage.

body.x-navbar-fixed-top-active .x-navbar-wrap {
height: 144px !important;}

#4 worked great! Thanks!

#5 (new) I’m using the mailchimp extension and have inserted signup form into the sidebar. I had a another signup in sidebar previously, which I plan to delete once I get the new one formatted correctly.
Widget seen on this page: http://www.bennyfromtheblock.com/product-category/new-arrivals/

5a. I would like to remove the space between the widget title and the input boxes.

5b. And reduce the width of the submit button.

Here is the code I’ve used to format the widget:

input#x_subscribe_form_full_name {
font-family:’catamaran’,’Helvetica’;
color:black!important;
font-size:15px!important;
font-weight:bold!important;
}

input#x_subscribe_form_email {border:none!important;font-family:’catamaran’,’Helvetica’;color:black!important;font-weight:bold!important;
}

.x-subscribe-form fieldset {color:black!important;width:100%!important;font-size:15px!important;font-family: “Helvetica Neue”,Helvetica,sans-serif;
}
.x-subscribe-form input[type=”submit”] {font-family:’catamaran’,’Helvetica’;font-size:15px!important;margin-top:10px!important;float:left!important; background-color:#FF2A13!important;border:none!important;
}

.x-subscribe-form input[type=”submit”]:hover {background-color:#0053AD!important;border:solid;
}

As always, Thank you so much!

[Lely]

Hi There,

#1 Remove this code:

body.x-navbar-fixed-top-active .x-navbar-wrap {
    height: 144px !important;
}

Then add this instead:

.home .entry-content>br {
    display: none;
}

#5
a:

#text-18 h4 {
    margin-bottom: 0;
}
.textwidget #x-section-1 {
    padding: 0;
}

b:
Please adjust this custom CSS :

.x-subscribe-form fieldset input[type="submit"]{
 width:150px !important; /*Adjusr 150 to your preferred width*/
 background-color:rgba(0,0,0,0.8);
 border-radius:0;
}

In case above CSS is being used for other submit button on other pages, please use the following instead:

#x-subscribe-form-5048 fieldset input[type="submit"] {
    width: 100px !important;
}

Hope this helps.

[Author]

Posts