Customize header - by William - on WordPress WooCommerce support

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

  • Avatar: William
    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.
    18 Answers
    Avatar: William
    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

    Avatar: Eva
    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.

    Avatar: William
    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

    Avatar: William
    William
    Participant
    January 2, 2017 at 12:03

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

    Thanks

    Avatar: William
    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

    Avatar: Rose Tyler
    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.

    Avatar: William
    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!

    Avatar: William
    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

    Avatar: Rose Tyler
    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.

    Avatar: William
    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!

    Avatar: William
    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

    Avatar: Rose Tyler
    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.

    Avatar: William
    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! 🙂

    Avatar: Rose Tyler
    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.

    Avatar: William
    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.

    Avatar: Rose Tyler
    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.

    Avatar: William
    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

    Avatar: Eva
    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.

  • Viewing 19 results - 1 through 19 (of 19 total)

You must be logged in to reply to this topic.Log in/Sign up

We're using our own and third-party cookies to improve your experience and our website. Keep on browsing to accept our cookie policy.