Customize elements at header

Hey there,
I want to customize the elements which tagged (by number at the picture) like below:
1. How to set the widht,height,font style for this element,
2. How to set the font style and size,
3. How to set the height,widht,and font size(inside) the bar,
4. How to set the font style and size,
5. How to set the height,widht,and font size(inside) for each row,
6. How to move this tool into a little bit above
Thank you for advance

I have reuploading the picture which I’m talking above. thank you

Attachments:

You must be logged in to view attached files.

Hello,

1 The height of header can be set in Woodmart > Header builder: https://xtemos.com/docs/woodmart/header-builder/header-rows-columns-configuration.

2 & 4 In order to change font styles, please navigate to Theme Settings > Typography > Navigation Font.

3 & 5 The height is set by custom CSS code. Let me know height of the block I will provide CSS code. Also please provide link with all these elements. On home page there are only a few of them. Also provide credentials. In order to change font styles, please navigate to Theme Settings > Typography > Navigation Font.

6. Please add this code to custom CSS area in the Theme Settings in order to correct:

.scrollToTop {
    bottom: 200px;
}

Kind Regards

Thank you for the detailed answer.
*still talking about the elements which tagged by number.

1. thank you for this amazing builder, but what I meant was about the categories element. I want to set the the width, height, even custom bacground color. Example: width=35px, height=20px, background=#custom_hexa
3-[search bar] let say I want to set the border width and height by 40px and 20px, then set the border-radius by 5px.
5-[each row inside categories] I want to set the height for each row become 20px.
Thank you

Hello,

You can make any changes via CSS code. However please note changing the width and height would influence the layout of other elements in the row. In addition, take into consideration that header row has flexible height and its final height depends on the biggest element in the row. If you reduce Categories navigation you would have a gap because anyway your header is 50 px in height.

Regarding the Categories element.
If you want to set the height for categories elements to be 20 px, use this CCS code:

#menu-categories li a {
padding:1px 18px;
background-color:#ffffff;
}

In result, your categories items would look like http://prntscr.com/is17fs

Put the necessary #FFFFFF color in the background.
The background for Categories menu is set in Theme Settings > Header > Categories menu

CSS code for search form:

.searchform input[type=text] {
    font-size: 15px;
    padding-right: 50px;
    height: 40px;
    border-radius: 20px;
}

Kind Regards

Hello,

Thank you for the custom code and all of the consideration. As I tagged on the picture, I want to solve number 2 issue. So, I’m thinking of changing the font size on main menu or set “browse categories navigation/bar” width (just like tagged by number 1). So please give me custom code to apply it with “width:60px”

Regards

Attachments:

You must be logged in to view attached files.

Hello,

In order to change font-size for navigation, please navigate to Theme Settings > Typography > Navigation font.

Here is code for Categories menu width as you requested:

.navigation-wrap .vertical-navigation {
    width: 60px;
}

Best Regards

I’m sorry Elise but the code doesn’t work. Corrects, I want to set category menu width by 200px. Thank you

Hello,

Then use this code:

.navigation-wrap .vertical-navigation {
    width: 200px;
}

Best Regards

Oh my god, do you guys too busy to read my report? you just taught me the same css class.
after all, thanks for your help.

Yes, but what is wrong with the code we gave you? It changes the categories block width. We tested it on our development website and it works well. The second one has the same selector but different width.

The only problem is that code doesn’t work in my website. If you want to looking clearly here I’ll give you the credentials. Thank you

OK, lets try to change that code to this one

span.menu-opener {
   min-width: 200px;
        width:200px;
}

Works great!!
Thank you so much for your help. Let me recommend your theme to my colleague.
Once again, good job xtemos team.

Great, we are glad that you like it 🙂

Thank you

[Author]

Posts