Home › Forums › WoodMart support forum › Bigger gap between menu items

Bigger gap between menu items

Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • September 12, 2018 at 10:13 am #76805

    arven1
    Participant

    Hi,

    Can you tell me, how can I make bigger gap between menu items and not to make gap bigger for categories menu section? Check my image in private so you can see what I mean.

    September 12, 2018 at 11:57 am #76812

    Elise Noromit
    Member

    Hello,

    Remove this code or set paddings as per your needs: http://prntscr.com/ktiqoh

    Best Regards

    September 12, 2018 at 2:30 pm #76827

    arven1
    Participant

    Did you check my image? If I remove this, things that I mark in red will not look that way. I don’t want that! I just want what is marked in blue to have space between the items.

    September 12, 2018 at 2:36 pm #76828

    Elise Noromit
    Member

    Hello,

    Yes, I have checked http://prntscr.com/ktl339

    Best Regards

    September 12, 2018 at 4:37 pm #76841

    arven1
    Participant

    I really don’t think you check it, if you do then you’ll know the difference. See this image and compare it to previous one. Image is in private.

    September 12, 2018 at 7:24 pm #76852

    Elise Noromit
    Member

    Hello,

    As you can see https://gyazo.com/4ad6cc26f05aa7edef20b288915c9f03 .woodmart-navigation .item-level-0>a styles do not influence the category items.

    As soon as you have commented the code http://prntscr.com/ktiqoh you menu got a bigger gap

    I have increased the left padding to 30px and menu items in the Category page remained the same: https://gyazo.com/234ab09dc9b2f3cc523d24a34ffe5eb9

    Have you solved the issue or you want more gap?

    By the way, if you want to reduce the gap in the category items, check this code: https://gyazo.com/cdcc007cfc06f0bf1c72e82e35260454

    Best Regards

    September 12, 2018 at 11:18 pm #76869

    arven1
    Participant

    Ok, I get it but still this code that you send me .woodmart-navigation .item-level-0>a influences main menu so I resolve that but if it does not influence category menu why is then gap more than it was and I just change values in

    .woodmart-navigation .item-level-0>a {
    padding-left: 30px;
    padding-right: 30px;
    }

    Can you explain that please?

    September 13, 2018 at 6:28 am #76884

    Elise Noromit
    Member

    Hello,

    The reason is that .woodmart-navigation is used in both of category menu and main menu, now I set .main-nav and check how it looks like.

    Best Regards

    September 13, 2018 at 7:48 am #76896

    arven1
    Participant

    Omg, we are exchanging 5-6 messages without you checking my initial image closely… Again, NO. It is not like I want! Menu is ok but categories are not in case this padding is set up:

    .woodmart-navigation .item-level-0>a {
    padding-left: 30px;
    padding-right: 30px;
    }

    Categories works ok but menu is not when this what you put are here:
    .main-nav .item-level-0>a {
    padding-left: 30px;
    padding-right: 30px;
    }

    which makes menu items ok but now categories are not how they suppose to be. I want both of them working properly without unnecessary gaps. Look closely at image in private.

    September 13, 2018 at 8:38 am #76906

    Elise Noromit
    Member

    Hello,

    Now your main menu has 30 px in padding. Here is the code: https://gyazo.com/dcb912e94ef9fe6b969d30d736f91f6c

    As you can see: 1. the code is working well for the main menu and it does not influence the category menu.

    At the same time, you have gaps 30px on the left in your category menu, as I have already shown the reason is image margin https://gyazo.com/8ada5a5d439061815642167327d467ad

    By the way, if you want to reduce the gap in the category items, check this code: https://gyazo.com/cdcc007cfc06f0bf1c72e82e35260454

    Please clarify your issue in details.

    Best Regards

    September 13, 2018 at 10:34 am #76928

    arven1
    Participant

    Did you check my image? You see comparison between those two that is now and one that I want. I want gap of each icon in category menu (left, right, top and bottom) to have SAME padding. Meaning padding from icon to the left edge needs to be the same as gap from icon to right side where text of each icon is. I think it is somewhere around 3-4px. The most important it needs to be the same as it is on my previous image. What ever I change here:

    img.iconic_icon {
    margin: 0 10px;
    }

    what ever value I set up, seems like I cannot get that and that’s why I need your help. But your are convincing me for 6-7 posts that everything is ok and the same just like I want even if you look it closely you’ll see that its not.

    September 13, 2018 at 11:15 am #76934

    Elise Noromit
    Member

    Hello,

    You want:

    gap of each icon in category menu (left, right, top and bottom) to have SAME padding. Meaning padding from icon to the left edge needs to be the same as gap from icon to right side where text of each icon is

    You write:

    gap between menu items and not to make gap bigger for categories menu section

    You have got the code as per the issue described.

    In order to make an equal gap on both sides of the icon in the category menu, add this code to the Theme Settings > Custom CSS: 

    .vertical-navigation .item-level-0>a {
    padding: 12px 0;
}

    Best Regards

    September 13, 2018 at 11:17 am #76935

    arven1
    Participant

    Yep, that’s it. Thank you.

    September 13, 2018 at 2:41 pm #76982

    Elise Noromit
    Member

    You are welcome! If you have any questions please feel free to contact us.

    Best Regards

  • Author
    Posts
Viewing 14 posts - 1 through 14 (of 14 total)

The topic ‘Bigger gap between menu items’ is closed to new replies.