Removal of shadow from Integrity stack?

[janand]

Hi,

I’ve looked all over the forum and went through topics asking about this issue but none of the fixes have worked for me.

I would like to remove the shadow from all elements in the Integrity stack to look, as this post cited, to look as clean as the Crafty demo.

In the original emails when I was trying to decide if Pro was the right theme for me, I was told by Themeco Sales that I could recreate the look of this site without much CSS and HTML programming knowledge which is what made me decide to go with this theme. However, I’m finding I can’t remove this or the large margins on either side of my test page surrounding the text and content and I’m still having a difficult time in general. Is this possible without having to do a custom stack?

Can you provide any help? Thank you very much. Link to site in question provided in a secure note.

[tristup]

Hi Natasha,

Thanks for reaching out.
I have checked your website and found that the Global Container is selected in the Row, and that is why it is taking the Container width from the Theme Options > Layout and Design.

I would suggest you deselect the *Global Container to make the section width full.

Hope it helps.
Thanks

[janand]

Hi,

Thank-you and I’m sorry but I can’t seem to find a Row, not even in the outline for Section 1?

Can you also tell me how to remove the box shadow from the Integrity stack? Such as the shadow underneath the navigation bar.

Thanks.

[tristup]

Hi Natasha,

To remove the shadow, I would suggest you use the code in the referenced thread given in your precious comment and let us know if that does not work for you.
Please remember that this code is a sample code, and it varies from case to case, and we can’t guarantee it works for you.

It seems that the default Content Layout element is set to the Grid and that is why you are not able to find the Row, I would suggest you set it to the Row from the Preference option shown in the following screenshot.

If you didn’t find the option, please provide login credentials for your site in a secure note to examine it further, including:

– WordPress Site URL & Login URL
– WordPress Admin username/password

To create a secure note, click the key icon underneath any of your posts.

Thanks

[janand]

@tristup

To remove the shadow , I would suggest you use the code in the referenced thread given in your precious comment and let us know if that does not work for you.

Unfortunately, as I referenced in my first post, I tried these potential fixes but none worked.

@tristup

It seems that the default Content Layout element is set to the Grid and that is why you are not able to find the Row , I would suggest you set it to the Row from the Preference option shown in the following screenshot.

I was able to find this setting but it was already set to “Row”, not “Grid” as speculated. However, I still cannot find the row in the outline.

[tristup]

Hi Natasha,

It seems that the Grid has been changed after the page was created and that is why the Grid is still there. I have recreated the section and now the width is full as you are expecting.
I have also checked the reference thread and sum up all the codes provided by my colleague and tested through the Browser Debugger tool and found that it is working. I would suggest you add the following code into the Theme Options > CSS.

.site, 
.x-site,
.x-navbar,
.entry-featured,
.entry-wrap,
.widget ul, .widget ol,
.widget ul li, .widget ol li,
.entry-footer a,
.widget_tag_cloud .tagcloud a, .widget_product_tag_cloud .tagcloud a 
{
    box-shadow: none;
    border: none !important;
}

Please remember that the above code will work if copied as it is and doesn’t conflict with any existing style.
Please note that the code provided serves only as a guide to help you get started custom coding on your own if there’s no option offered in our theme or the products we bundle.
We really do not provide support for custom codes that means we can’t fix it in case it conflicts with something on your site nor will we enhance it.

Thanks

[janand]

@tristup

It seems that the Grid has been changed after the page was created and that is why the Grid is still there. I have recreated the section and now the width is full as you are expecting.

Can you clarify for me what this means so if this happens again, I know how to fix it myself?

And yes, the code you provided here works. Thank-you very much.

The reason this is important to me is when I was investigating this theme, I was assured Pro would meet all of my needs and requests while only having a beginner’s level of CSS and HTML knowledge and that’s the basis upon which I bought this theme. I can provide the emails as support if you’d like.

I’m really sorry to ask this but… is there maybe also a way to lessen the margins on the elements in the navigation bar (the text element and the area where I’m to assign a menu). Is there a way I can do that?

Thanks again for your help.

[tristup]

Hi Natasha,

It will not happen again for the newly created pages, but for the old pages that have been created before the Grid change to Row will have the Grid in structure.
I would suggest you go through the following link, which will help you with this.

Documentation: https://theme.co/docs
Header Builder Article:https://theme.co/docs/header-builder-overview
How to set up Navigation in Header: https://theme.co/docs/how-to-set-up-navigation

Thanks

[janand]

Thanks, I was able to achieve the header that I wanted

I did have three more questions if that is alright but they are not related to headers:

1. Is there a way I can get rid of all the shadows on elements in the Integrity stack? For instance, on the mobile menu and on thumbnails in the category pages :

2. Is there a way to get remove these dividers as seen in this image?

3. I fiddled and fiddled but I’m unable to get the white background to properly expand the full height of each cell (it has been set as a text element’s background) when the cursor mouses over each image. I did set the grid’s height to 50 vh 50 vh because I wanted a larger height on this grid but then the text element stopped expanding to the full height of the cell.

Thanks!

[tristup]

Hi Natasha,

Please find the answer to your question below.

1. To remove the Shadow from the thumbnails in Shop and Category page, you need to add the following custom CSS code into the Theme Options > CSS.

    [class*=woocommerce] li.product
    {
        box-shadow:none !important;
    }
   

And it seems that you are using any of the Navigation elements to show the Burger menu. I would suggest you disable the Box Shadow option from the Toggle.

2. To remove the line shown in the screenshot, you need to add the following custom CSS code into the Theme Options > CSS.

    .x-colophon.top, .x-colophon.bottom,
    .x-colophon+.x-colophon
    {
        border-top:none !important;
    }
   

3. It is not possible to recognize what exactly you are trying to do here, can you please refer to any page and section where the Grid is already placed.

Please remember that the above code will work if copied as it is and doesn’t conflict with any existing style.
Please note that the code provided serves only as a guide to help you get started custom coding on your own if there’s no option offered in our theme or the products we bundle.
We really do not provide support for custom codes that means we can’t fix it in case it conflicts with something on your site nor will we enhance it.

Thanks

[janand]

@tristup

It is not possible to recognize what exactly you are trying to do here, can you please refer to any page and section where the Grid is already placed.

So this is the grid (I’ll provide the link to this specific page in a secure note) that I’m referring to:

You can see I’ve changed the height from auto to 50vh. I did this so as to increase the height of the row.

Ideally, when you role your cursor over an image, the image should go white and the category’s title should appear.

However, since changing the height of the row, the text element’s background no longer covers the entire image but only about 80% of the image (when I’d like it to be 100%)

I tried fiddling with the text element’s padding in the top and bottom areas but it doesn’t always work depending on the ratio of the screen (as seen in example):

Is there anything I can do?

And thanks for the codes, they worked

[tristup]

Hi Natasha,

I have checked and found that problem in the Page Builder but the issue does not appear in the frontend. It was due to the Text element height, I went ahead and added the following custom CSS code into the Element CSS of the Text element and it solved.

Thanks

[janand]

Thank-you!

I’m afraid a few more questions came up as I continued working on the site today:

Q1: I was trying to achieve the look as demonstrated by this tutorial but though I added in the calc(100vh - 100px) for height in the dimensions of the nav bar, the ‘Hero’ bar still jumps and the header disappears when you scroll down. Additionally, the drop down menus are hidden by the ‘Hero’ element (link to header in question provided in a secure note)

Q2: With this header, I’m also trying to get the image element to center align over the headline element and would like that to center align over the text element. However, all the elements seem to be aligning horizontally. How can I get them to separate into separate lines?

Q3: On the categories page, is it possible to hide the ‘default sorting, etc.’ drop down menu and the ‘search results’ text? I’d just like to make this look like a regular page. I’ve taken screenshots about what I’m talking about if this helps:

Is there a way to style these kinds of pages? I believe this is a product type page.

Thanks! Links will be provided in secure note.

[tristup]

Hi Natasha,

Please find the answer to your question below.

1. I have checked the page but didn’t find the Second bar in the header. I have also checked the Header but didn’t find the issue too. I would suggest you assign the header to a page and create a screencasting video that may help us to recognize the problem.

2. You need to set the Flexbox > Child Placement to Column and Align Horizontal to Center of the Container to get the content in each row and centered align.

3. To hide the Default Ordering from the Category, please add the following custom CSS code to Theme Options > CSS.

   .tax-product_cat .woocommerce-ordering
   {
   display:none;
   }

Please remember that the above code will work if copied as it is and doesn’t conflict with any existing style.
Please note that the code provided serves only as a guide to help you get started custom coding on your own if there’s no option offered in our theme or the products we bundle.
We really do not provide support for custom codes that means we can’t fix it in case it conflicts with something on your site nor will we enhance it.

NOTE: I found that you are still using the older version of Pro, I would suggest you update it to the latest version to get newly added options and features.

Thanks

[janand]

Thanks! That worked nicely. Is there possibly a way to hide the following on the category page as well?

I’m sorry about the header not being there. I’m not sure what happened. It should be working now if you go to the same link. I’ll provide the link to the header as well.

I’ve included a video of the screengrab over what’s going on in a secure note as well. Basically, when I scroll down, it looks like the ‘hero’ bar that’s below ‘bar’ slides over the nav bar (‘bar’) and hides it – like it’s layering on top of the the ‘hero’ bar.

[ruenel]

Hello Natasha,

Both the Bar and the Hero is having the same z-index of 9999 which makes the Hero bar stay on top of the other. You will need to change the z-index of the Hero bar to 9998 so that it goes behind the Bar.

Hope this makes sense.

[janand]

Thanks, that worked!

I’m sorry for another question but I couldn’t find an answer to this in the documentation. Is it possible to have different headers per the device? Like having a different header appear on the mobile version of the same page if that makes sense?

I apologize for all the questions!

[prakash_s]

Hello Natasha,

You can not set the different Header for the mobile but you can set different layouts for the mobile. I would suggest you add the Header Bar for the mobile and hide it for the desktop and larger screen and display it to mobile with the help of breakpoints.

Hide or Show Content by Device Size | Themeco Docs

Thanks

[janand]

Thank you! That worked well!

So I’ve been unable to find answers to these questions I’ve asked up thread:

Q1: Is there a way I can hide the following on category pages?

Q2: And where is it that I style the look and grid of a category page as set up here? [Link in secure note]

Thanks!

[prakash_s]

Hello Natasha,

To hide the product category archive page product count filter you can use this custom CSS code,

p.woocommerce-result-count {
    display: none;
}

To change the product column layout please have a look at this article.

Change number of products per row - WooCommerce Docs

Alternatively, since you are a Pro theme user you can use the layout manager to creates a custom layout for the Product category page.

Layout Builder: Archive Templates

The purpose of providing custom CSS is to show you how to add CSS code to your site. Writing custom CSS is outside the scope of our theme support. If you need more customization, you need to learn CSS and learn how to use the browser’s element inspector or you can subscribe to One to get further assistance.

Hope it helps.
Thanks