Ethos Navigation Padding

Support
#1

Hi,

I have tried to remove the padding between the navigation menu and the slider but there is still a bar showing.

I have used this code too but still shows around 5px of the background.

.x-logobar-inner {
padding-bottom: 0;
padding-top: 0;
}

.x-container>.offset {
margin-top: 0;
}

Any ideas?

Thanks,

#2

Hi There @dirtyfrenchgirl

Thanks for writing in! Upon checking, I see that you have enabled maintenance mode for your site. Could you please disable it temporarily, so that we can look into your issue.

First of all, make sure that you’re fully updated by checking the version numbers from here (https://theme.co/apex/forum/t/troubleshooting-version-compatibility/195).

In the meantime, copy all of your custom CSS rules into an online tool like CSS Lint (http://csslint.net/) and see if you’re getting any errors. If you see any errors, you need to correct them to parse your CSS correctly.

Also if you have any caching plugins, you need to purge your server cache and clear your browser cache before testing your changes.

Thanks!

#3

Hi,

I’ve disabled the maintenance mode for now.

Thanks

#4

I would also like to know if we can put products on the home page too?

#5

Hello There,

You are having this gap issue between the navigation menu and the slider because you have added the slider incorrectly. Please edit your page and delete the Slider in Cornerstone. You should be applying the slider below the masthead using the Slider Settings. To know more about how you can apply a slider in the theme, please check this out: https://theme.co/apex/forum/t/features-sliders/97/1

And to temporarily resolve your current issue, please edit your page back in Cornerstone and insert the following custom css in the settings tab, Settings > Custom CSS

.home .entry-content {
    margin-top: 0;
}

You can put products in your homepage by using a text element and a WooCommerce product shortcode. Please check out this documentation about WooCommerce shortcodes that you can use.

Hope this helps.

1 Like
#6

That’s very helpful, thank you!

#7

You are most welcome!

#8

Hi,

Is there anyway to change the css heading font sizes and remove the yellow background/product count for the woocommerce shortcodes? https://dirtyfrenchgirl.com/the-shop/

#9

Hello @dirtyfrenchgirl,

Thanks for updating the thread.

Please add following CSS under Pro > Theme Options > CSS:

.woocommerce-loop-category__title {
    font-size: 1.8rem;
    margin-top: .2em;
}

.woocommerce-loop-category__title mark.count {
    background-color: transparent !important;
}

If you would like to learn CSS, I am sharing few resources that you take a look to get started with CSS and an interesting tool that you can use to speed up the development process.

I recommend you to watch following video that will help you to get started with CSS.

https://www.youtube.com/watch?v=MFR4WXiLzpc

Sometimes it can get a bit difficult to find out the right selector to be able to write the required CSS codes. A handy tool that can help you in this is Google Chrome dev tools. I am sharing the resource that you can refer to get started with dev tools.

https://developers.google.com/web/tools/chrome-devtools/css/

https://developers.google.com/web/tools/chrome-devtools/

https://www.youtube.com/watch?v=tP_kXBJWPhQ&t=200s

Thanks.

#10

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