Return to previous page

Header Search - by malipl - on WordPress WooCommerce support

This topic has 7 replies, 2 voices, and was last updated 6 years ago ago by Olga Barlow

malipl

Participant

October 19, 2018 at 08:56

Hi
I am interested in the appearance of the header as here in the picture. It consists of 3 columns, red and white
https://prnt.sc/l7knhx

after going down a little bit, the first red column on the top of the husk itself, we would also like it.

https://prnt.sc/l7kod2
page: swiatksiazek.pl

Is there a chance to do something like that?

#201330 Copied

6 Answers
Olga Barlow

Support staff

October 19, 2018 at 10:33
Hello,

1) It’s possible by some additional customization. Add the icons in menu settings for the every secondary menu item http://prntscr.com/l7vgz6 and add the following code in child theme style.css
```
.secondary-menu-wrapper .menu>li>a i {
    padding-right: 10px;
    margin: 0 10px;
    border-right: 1px solid #cdcbcb;
    line-height: inherit;
}
.secondary-menu-wrapper .menu,.secondary-menu-wrapper .menu>li {
    padding: 0;
}
.secondary-menu-wrapper .menu>li>a {
    line-height: 2;
    padding-bottom: 0;
    padding-top: 0;
    border-bottom: 1px solid #cdcbcb;
    padding-right: 30px;
}
.secondary-menu-wrapper .menu li.menu-item-has-children>a:before {
    padding: 0 10px;    
    line-height: 31.92px;
    background-color: #f2f2f2;
}
.header-advanced .secondary-title, .header-advanced .secondary-menu-wrapper .menu {
    width: 310px;
}
```
2) To make the main header as the fixed header disable the fixed header in theme options and try to add the following code in child theme style.css
```
.header-wrapper{
    position:fixed;
    top:0;  
    z-index: 10000;
}
.admin-bar .header-wrapper {
    top: 32px;
}
.content-page, .page-content {
    margin-top: 195px;
}
```
Regards
#201342 Copied
malipl

Participant

October 19, 2018 at 13:12

We did not understand a bit :), I would like the top bar to be normal, however, after going down to disappear and only the search engine and categories will be left. number 2. After pasting your code one and the other, it disappeared permanently
https://prnt.sc/l7xge0

#201353 Copied

malipl

Participant

October 22, 2018 at 13:35

HI

Is it clear how to do it? because after entering this code, it does not work correctly

#201442 Copied

Olga Barlow

Support staff

October 22, 2018 at 15:54

Hello,

It’s possible to make header sticky using CSS only with the top bar https://gyazo.com/a7a3b3572dc6560b3895a85af7967bc9 . If you want to make only the main header area + menu as sticky it requires the JS changes. In this case contact WPKraken team to implement this because such additional customization is not included in our support https://themeforest.net/page/item_support_policy

Regards

#201457 Copied

malipl

Participant

October 22, 2018 at 16:14

That’s exactly what I mean, but I would like to scroll down the pages to make the main tob bar hide, like here
http://www.swiatksiązek.pl

#201461 Copied

Olga Barlow

Support staff

October 22, 2018 at 17:04

Hello,

On that site, script adds the additional class to the body once user scroll the page. And that class is used to make sticky main header + menu only.
All the available fixed header types you can find in Theme Options if you want something extra it requires additional customization. Our basic support does not include additional customization service. Contact WPKraken team for help with additional customization if you don’t have JS/CSS skills.

Regards

#201469 Copied
Viewing 7 results - 1 through 7 (of 7 total)