Return to previous page

Topic: Customize header

William

Participant

December 29, 2016 12:05 am

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

Content is visible for topic creator and
support staff only.

#150456 copied to clipboard

Like

William

Participant

December 29, 2016 12:28 am

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 to clipboard

Like

Eva Kemp

Support staff

December 29, 2016 6:39 pm

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 to clipboard

Like

William

Participant

December 30, 2016 7:24 pm

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 to clipboard

Like

William

Participant

January 2, 2017 12:03 pm

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

Thanks

#150674 copied to clipboard

Like

William

Participant

January 2, 2017 12:08 pm

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 to clipboard

Like
Rose Tyler

Support staff

January 3, 2017 8:36 am
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 to clipboard

Like
William

Participant

January 8, 2017 3:03 pm

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 to clipboard

Like

William

Participant

January 8, 2017 10:09 pm

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 to clipboard

Like
Rose Tyler

Support staff

January 9, 2017 9:08 am
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 to clipboard

Like
William

Participant

January 10, 2017 12:07 am

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 to clipboard

Like

William

Participant

January 10, 2017 12:11 am

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

Thanks

#151306 copied to clipboard

Like
Rose Tyler

Support staff

January 10, 2017 9:21 am
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 to clipboard

Like
William

Participant

January 10, 2017 1:41 pm

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 to clipboard

Like

Rose Tyler

Support staff

January 10, 2017 2:00 pm

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 to clipboard

Like

William

Participant

January 13, 2017 11:32 pm

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 to clipboard

Like
Rose Tyler

Support staff

January 16, 2017 8:16 am
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 to clipboard

Like
William

Participant

February 2, 2017 11:03 pm

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 to clipboard

Like

Eva Kemp

Support staff

February 3, 2017 5:29 pm

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 to clipboard

Like