Home › Forums › WoodMart support forum › como cambiar el estilo del menu de categorias

como cambiar el estilo del menu de categorias

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • October 24, 2024 at 12:31 pm #607326

    gabrielmaciasc
    Participant

    Good morning everyone, I wanted to know how I could change the style of your categories menu because I like how it is shown only that I have 23 categories and wanted to change it and that are displayed in 3 rows of 10 catg and then the subcategories (I know that I have to do the sub) I tried to do it by css and I do not respond not know if there is an alternative way to not be displayed in an infinite list if not that come out in 3 columns and then when you want to see the sub categories appears above ? thank you very much for your patience.

    Attachments:
    You must be logged in to view attached files.
    October 25, 2024 at 11:24 am #607555

    Hung Pham
    Keymaster

    Hello gabrielmaciasc,

    Thanks for reaching to us and appreciate your patience.

    Please provide me with the mockup of the styles that you try to achieve and we’ll send proper instructions if it’s possible.

    Regards,

    October 25, 2024 at 11:42 am #607560

    gabrielmaciasc
    Participant

    hello good morning, this is my code in css but when i put on css not works nothing and when i put on navegator just eliminate the new lines so i share you my code:

    /* Configuración del contenedor del menú en columnas */
    .wd-nav-vertical {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    border: 1px solid var(–brdcolor-gray-200);
    border-radius: var(–wd-brd-radius);
    width: 100%;
    max-width: 100%; /* Asegura que ocupe el ancho completo en dispositivos pequeños */
    }

    /* Estilos generales del menú */
    .wd-nav-vertical.wd-design-default {
    border: 1px solid var(–brdcolor-gray-200);
    }

    .wd-dropdown-cats, .wd-dropdown-cats .wd-nav-vertical, .wd-dropdown-cats .wd-nav-vertical > li:first-child > a {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    }

    /* Columnas de categorías */
    .wd-nav-vertical > li {
    width: calc(33.33% – 10px); /* Tres columnas con espacio entre ellas */
    margin: 5px;
    list-style: none;
    padding: 10px;
    border-bottom: 1px solid var(–brdcolor-gray-200);
    color: var(–text-color, #333);
    }

    /* Limitar a 10 categorías por columna */
    .wd-nav-vertical > li:nth-child(10n+1) {
    clear: left;
    }

    /* Estilos para los elementos del menú */
    .wd-nav-vertical > li > a {
    display: block;
    text-decoration: none;
    color: inherit;
    padding: 5px 0;
    font-size: 14px;
    }

    /* Estilo de hover para el menú */
    .wd-nav-vertical > li > a:hover {
    color: var(–hover-color, #007bff);
    font-weight: bold;
    }

    /* Responsividad para dispositivos móviles */

    @media     (max-width: 768px) {
    .wd-nav-vertical > li {
    width: 100%; /* Una columna en dispositivos móviles */
    margin: 0;
    border: none;
    border-bottom: 1px solid var(–brdcolor-gray-200);
    }
    }

    thank you for all and have a nice day

    October 26, 2024 at 1:03 pm #607779

    Hung Pham
    Keymaster

    Hello gabrielmaciasc,

    Please provide me with the mockup of the styles that you try to achieve and we’ll send proper instructions if it’s possible.

    Regards,

    October 26, 2024 at 3:40 pm #607807

    gabrielmaciasc
    Participant

    I don’t understand very well what you mean by passing you a mockup of how I want the style to look like I just shared with you the css where you can see exactly what I’m looking for, rather than a straight line of categories I want 3 columns with 10 categories to appear.

    October 28, 2024 at 12:20 pm #608053

    Hung Pham
    Keymaster

    Hi gabrielmaciasc,

    Thanks for your patience.

    Please read and follow the instructions here to create Mega Menu https://xtemos.com/docs-topic/create-mega-menu/

    Regards,

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