Space between header and first section / row

Hi, i have a custom header and have disabled “header overlap”. My first section and the row’s / columns within it all have margin top set at 0px. However there is still a white space of approx 40px which i can’t get rid of?

Contained within my first row is a woodmart categories widget and a revolution slider, split 1/4 – 3/4.

i’d like my first row of content to sit tight to the bottom of the header / sticky header.

Any ideas?

??

Hi,

By default, our header has a margin bottom and if you want to remove it on your home page, you can simply add a negative margin top for the first row on the page with Visual Composer. So just set -40px for example to compensate it.

Regards

Thanks, I had tried this method but had noticed a white space delay just after the sticky header activates i.e the first row does sit tight to the header, but once you scroll down once the sticky header reduces in size leaving a 40 – 50px white space until a few more scrolls. The first row doesn’t jump up to suit the resize. Any ideas?

Also, if you look at the site, you’ll notice that i’m using the woodmart categories widget on the left and a rev slider on the right, they’re contained within a row, which is contained within a section.

The content is important, so I’m trying to get it to fully display in desktop / tablet browser view ports using the CSS “vh” attribute. I’ve given the section an ID of #Sec_1 and have then used the code-

#sec_1 {
height: 60vh;
}

Within the Woodmart custom CSS editor, but it’s having limited effect. The section is reducing to approx 80% of viewport height and the Rev slider itself is not down scaling to suite (see website). Any ideas?

1. Yes, this gap appears because the row with menu is hidden on sticky header. You can try to display it or make sticky header appear after you scroll the whole header https://xtemos.com/docs/woodmart/header-builder/enable-sticky-header-option/

2. As we can see, you have enabled full height option for that section and your CSS is not working in this case. It takes the full height of the window minus height of the header.

Regards

Hi Artem

Thanks for your reply. Firstly, this site has now been migrated from “www.next.rentals” to “www.nexthss.com”- please refer to the latter going forwards.

1) I checked the Section / Rows and removed the full height option before reapplying the code to the section (#sec_1), this didn’t work so instead i gave the row an ID and applied the same code which worked in desktop view, however when i switched to tablet and mobile view, the content in the rows below overlapped my slider and the categories menu in my first row.

I’ve removed the style for now, but i’d like to try and get this working- any ideas?

2) With regards to the Categories menu next to my slider, I’d like to style this but cant get it to react to the class which I’ve given it.

a) You’ll see that there are 6 list items below the “Popular Categories” widget title. The height of these appear to be preset and they are all bunched up to the top. I’d like any list items in this widget / column to be spaced evenly so that they fill the entire height of the column, which in turn will react to the size of the row. Much like how my menu in the header does, albeit that reacts to the varying width.

b) I’d also like to be able to style the list items individually, i want to add background colour, text colour and an icon / image to the right of the text / column.

c) Finally, i applied a -40px margin to the first section in line with your previous advise, the content of the section now sits flush with the header, which is great. However, if you resize your browser window to mobile view, you’ll note an approx 50px white space between the “Popular categories” title and the bottom of the header. How can i remove this please?

Thanks

Hello,

Please, attach screenshots with an explanation to each point for better understanding.

Thank you

Please see attached

Attachments:

You must be logged in to view attached files.

Please see attached 1 – a

Please see attached, I’ve had to put these together into a .pdf due to file size exceeding upload limit

Attachments:

You must be logged in to view attached files.

Individual screen shots 1-a to 2-b

Attachments:

You must be logged in to view attached files.

Individual screen shot 2-c

Attachments:

You must be logged in to view attached files.

1-a. Yes, it is how your CSS code works and it is not our theme’s bug.

1-b. The same here. We suggest you to remove it and use only slider’s options.

2. Sorry, but there is no such option for our categories menu and we don’t have a CSS solution for this as well. It may require additional customization that is out of our theme’s support scope.

Thanks for the reply, with regards to 2. , you were able to provide the following code to get the header-builders menu category widget (Similar to the category widget in question) to become full width and responsive-

Global-

.site-mobile-menu li a,
.woodmart-navigation .item-level-0>a {
text-transform: none;
}
.woodmart-navigation .item-level-0.menu-item-has-children>a:after {
content: none;
}

#hp_row_1 {
max-height:60vh;
}

.footer-widget {
width: 100%;
}
.popular_cat ul li a {
color: blue;
font-size: 26px;
}

Desktop-

.whb-full-width .whb-header-bottom>.container, .whb-full-width+.whb-clone .whb-header-bottom>.container {
width: 100%;
padding: 0;
}
.main-nav .menu {
width: 100%;
}
.main-nav .item-level-0 {
-webkit-box-flex: 1;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
}

.main-nav .item-level-0 a {
width: 100%;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.main-nav .menu .item-level-0>a {
color: white;
border: 1px solid white;
}
.main-nav .menu .item-level-0>a:hover {
background-color: yellow;
color: blue;
}

——

This code clearly works for these in line list / category items, Is there not a similar method which can be applied to this categories menu? If not, why does your Categories menu widget offer a CSS class designation option for customisation if it cannot be customised?

Many thanks

Where did you get this code?
Sorry, do you want to make it full width or make it fill the whole height of the row? They are absolutely different things.

From Artem temos. I’ve only raised two topics, this being the second. Its in the previous topic, reply #’s are 66590, 66597 and 66604. I made some minor adjustments to your code to make it do what i wanted.

With regards to this, I want it / the list items to fill the height of the row.

I’m aware that height / width are different thing’s and could code easily code this in other circumstances, but like the header, I believe this widget will have specific classes/ID’s which I’d need to identify in order to make the required changes.

Thanks

Do you mean that you can apply CSS changes by your own? This widget has a CSS class widget_nav_mega_menu.

Regards

Yes, but this class does not allow me to make the changes that i need.

The “widget_nav_mega_menu” class allows me to change the background colour etc, but the actual container / li elements will not stretch to the height of the row with any of the code that i’m using.

Are there preset outer containers which are preventing this?

Again, I’d like the container / Ul & Li to stretch to the height of the row.

Regards

Yes, it is added inside WPBakery columns and wrapped with a few DIV tags that don’t have specific CSS classes. And those elements are not stretched to full height that is why they limit the menu widget with ul/li elements.

[Author]

Posts