Return to previous page

Customize header - by William - on WordPress WooCommerce support

This topic has 19 replies, 3 voices, and was last updated 7 years, 9 months ago ago by Eva Kemp

William

Participant

December 29, 2016 at 00:05

Hello,

I am wondering if it is possible to customize the header. I want the menu background to be a lot smaller. I want the size to be as small as the top bar background. Is this possible?

Also i am wondering about the mobile version? Is it possible to customize it without changing anything on the computer version? If so, how do i do it?

Thanks

Please, contact administrator
for this information.

#150456 Copied

18 Answers

William

Participant

December 29, 2016 at 00:28

1 more question. My product page has started acting wierd. It is not putting the product in a row now. It is leaving blank spots where product should be.

Do you know the reason for this?

Thanks

#150458 Copied

Eva Kemp

Support staff

December 29, 2016 at 18:39

Hello,

As I see you’re using Shopify on your site and not our theme. Please activate Royal theme at first and let us know.

Regards,
Eva Kemp.

#150522 Copied

William

Participant

December 30, 2016 at 19:24

Hello!

I used shopify but i closed my shop weeks ago and now working on a wordpress shop with Royal theme.
I dont know why you still see shopify.

Thanks

#150622 Copied

William

Participant

January 2, 2017 at 12:03

Now everything should be in orderP. Can you now answer the questions please?

Thanks

#150674 Copied

William

Participant

January 2, 2017 at 12:08

Also i am wondering where to change the hoover settings when you hoover on a link. Or do i got to change this in css?

Thanks

#150675 Copied
Rose Tyler

Support staff

January 3, 2017 at 08:36
Hello,

Try to add this code in Global Custom CSS section:
```
.header-wrapper .menu > li > a {
    padding-top: 10px;
    padding-bottom: 5px;
}
```
For mobile version, you can write some code in Theme Options > Custom CSS > Custom CSS for mobile.
As for product page, try to disable all 3-rd party plugins, clear browser cache, and check the issue.

In your case you need to use css code. For example, to change styling for all links use the following code in Theme Options > Custom CSS > Global Custom CSS section:
```
a:hover {
    text-decoration: underline;
    color: red;
}
```
Regards,
Rose Tyler.
#150699 Copied
William

Participant

January 8, 2017 at 15:03

Hello,

I am not able to make it work with the hoover effekt for the links in the main menu. I try change it with the css you gave me, and all other links than on the main menu gets the effect i want.
What can i do about this?

Thanks!

#151154 Copied

William

Participant

January 8, 2017 at 22:09

Hello again,

I am wondering if it is possible for me to have the same hoover setting as netaporter.com has. I got the same small row and would like when i hoover the link all box become white and text black.

Is this possible?

Thanks

#151159 Copied
Rose Tyler

Support staff

January 9, 2017 at 09:08
Hello,

Try to add this code in Global Custom CSS section:
```
.header-wrapper .menu {
    padding-top: 0;
    padding-bottom: 0;
    line-height: 10px;
}
.header-wrapper .menu > li > a:hover {
    background-color: white;
    color: black;
}
```
For this .header-wrapper .menu > li > a in custom css you can change padding to padding-bottom: 5px;, also add transition: all 0.2s ease-in-out;

Regards,
Rose Tyler.
#151175 Copied
William

Participant

January 10, 2017 at 00:07

Hello Rose!

It worked out great! Thank you.

Some more questions:

1, I want to use the site layout “boxed”, but i want to remove the border lines and the shadow from the box lines. Do you know how?

Also, about mobile version, is it possible to have 2 pictures on a row instead of only one picutre?

Takes so long time for customer to scroll down. 🙂

Thanks!

#151305 Copied

William

Participant

January 10, 2017 at 00:11

Also to have the footer 2 in a row instead of one. Would it be possible?

Thanks

#151306 Copied
Rose Tyler

Support staff

January 10, 2017 at 09:21
Hello,

Please add this code in Global Custom CSS section:
```
.boxed .st-container {
    border: none;
    box-shadow: none;
}
```
Custom CSS for mobile:
```
#wdi_feed_0 .wdi_feed_item {
    width: 50%;
}
```
To replace demo footer with yours, you need to disable it in Theme Options > General > Show footer demo blocks > Off. Then add “8theme – Static Block” widget in Appearance > Widgets > Footer 1 or Footer 2 area and select the block you created.
https://8theme.com/demo/docs/royal/index.html#!/9_footer

Regards,
Rose Tyler.
#151326 Copied
William

Participant

January 10, 2017 at 13:41

Hey,

Thanks, removing the border worked!

But the css for mobile didnt work out, no different from without the code. I put the code: #wdi_feed_0 .wdi_feed_item {
width: 50%;
}

In Custom CSS for mobile.

And about the footer, i like how it look like on deskop. But i am wonderingen if possible same as the photos and products. If it possible to have 2 in one row? Sorry for my english

Thanks! 🙂

#151395 Copied

Rose Tyler

Support staff

January 10, 2017 at 14:00

Hello,

I’ve added !important; to previous code and changed Column Settings http://prntscr.com/dtsrko
Please clear browser cache and check.

Regards,
Rose Tyler.

#151396 Copied

William

Participant

January 13, 2017 at 23:32

Hello thank you!

It worked on the landing page, on the instagram pics but still on the product page is only 1 per row.

#151858 Copied
Rose Tyler

Support staff

January 16, 2017 at 08:16
Hello,

You can show 2 products per row using this code in Theme Options > Custom CSS > Custom CSS for mobile:
```
.products-grid .product {
  width: 50% !important;
}
```
Regards,
Rose Tyler.
#151921 Copied
William

Participant

February 2, 2017 at 23:03

Hello,
I talked to you earlier in this thread that my product page acting weird. Dont fill upp all page 1 with products before creating page 2. So it leaves white space where products should be. You told me to erase all 3rd part plugins. What exactly is a 3rd part plugin?

Thanks

#153840 Copied

Eva Kemp

Support staff

February 3, 2017 at 17:29

Hello,

3rd-party plugins means the plugins that are not included in the theme package are not in the list of required plugins.

Regards,
Eva Kemp.

#153948 Copied
Viewing 19 results - 1 through 19 (of 19 total)