Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • January 12, 2022 at 2:29 am #1335142
    mistermagoo8691

    Hi folks.
    I don’t understand why I am able to change almost everything on my full width sub-menu with the CSS below (the font size, the font weight, the color…) but I cannot change the thickness of the border. 

    #top .av-subnav-menu > li > a {
	font-size: 16px;
	font-weight:bold;
	font-family: 'Lato'!important;
        color: #6bad4e;
        border-width:1px!important;
	}

    Why the border-width cannot be adjusted with this CSS?
    THX!
    Bye,
    A.-

    January 12, 2022 at 6:48 am #1335177
    Rikard

    Hey Angelo,

    Could you post a link to where we can see the element in question please?

    Best regards,
    Rikard

    January 12, 2022 at 11:27 am #1335212
    mistermagoo8691

    Hi Rikard, thanks for your help: my site is not in production yet, it is in maintenance mode. I can create a temporary editor account (“editor” is enough?) and send it in the private area, or is there any other way to give you access to a page?
    (oh: if it can help, it is in a Portfolio page).

    See here the “Inspect” part of the menu from Chrome:

    <div id="sub_menu1" class="av-submenu-container av-tbsa8f-baacc0bc5451ea87ab7b60eb3af3c7b1 main_color  avia-builder-el-0  el_before_av_section  avia-builder-el-first  av-sticky-submenu container_wrap fullsize" style="z-index: 301; top: auto; position: absolute;"><div class="container av-menu-mobile-disabled av-submenu-pos-center"><ul id="av-custom-submenu-1" class="av-subnav-menu">
<li class="menu-item av-qyb2wv-5546909a5a6fddebdee6e58de39e880d menu-item-top-level av-menu-button av-menu-button-bordered menu-item-top-level-1"><a href="#descrizionegenerale"><span class="avia-bullet"></span><span class="avia-menu-text">Descrizione generale</span></a></li>
<li class="menu-item av-pp72en-beec1fc3d1b8765b1f4ee78bcaac2100 menu-item-top-level av-menu-button av-menu-button-bordered menu-item-top-level-2"><a href="#partenzaearrivo"><span class="avia-bullet"></span><span class="avia-menu-text">Partenza e arrivo</span></a></li>
<li class="menu-item av-ogy4q7-ebadf66435949e1f0f30ea21504fbca2 menu-item-top-level av-menu-button av-menu-button-bordered menu-item-top-level-3"><a href="#mappadelsentiero"><span class="avia-bullet"></span><span class="avia-menu-text">Il percorso</span></a></li>
<li class="menu-item av-qyb2wv-b42cbb8652e18081a32b8759f79bdd3a menu-item-top-level av-menu-button av-menu-button-bordered menu-item-top-level-4"><a href="#escursioni"><span class="avia-bullet"></span><span class="avia-menu-text">Escursioni personali</span></a></li>
</ul></div></div>
    January 12, 2022 at 1:02 pm #1335233
    Rikard

    Hi,

    Thanks for the update. Please try this CSS instead:

    #top .av-submenu-container {
    border-bottom-width: 10px;
}

    Or if it’s the dividers between the menu items that you want to change:

    #top .av-subnav-menu > li > a {
    border-left-width: 10px;
}

    If that doesn’t work, then please provide us with login details in private.

    Best regards,
    Rikard

    January 12, 2022 at 3:11 pm #1335251
    mistermagoo8691

    Thanks Rikard; I’ve tried both snippets, but they are not working. I also clearead my whole css customization, leaving only your two snippets, but they are both still not working…

    In the private area I’ve added the information on how to connect to my site.
    Crossing fingers…

    January 12, 2022 at 4:00 pm #1335258
    Yigit

    Hi,

    Thanks for contacting us!

    I added following code to bottom of Quick CSS field

    #top .av-menu-button > a .avia-menu-text {
  border-width: 1px;
}

    Please review your website :)

    Best regards,
    Yigit

    January 12, 2022 at 4:24 pm #1335262
    mistermagoo8691

    Thanks Yigit! So, basically to change the border you went down to the “avia-menu-text” class, the inner one in the [A HREF] HTML tag.

    It is not clear to me why using .av-subnav-menu > li > a , that should bring you exactly to the same [A HREF] tag, is working fine to change the color, but it is not working if you want to change the border!

    It is true that I am a rookie in CSS, but it is also true that it is not easy at all to master CSS!

    Thanks once more, Yigit. Solved!
    Bye!
    A.-

    January 12, 2022 at 4:35 pm #1335267
    Yigit

    Hey A,

    That is because the border is defined on “avia-menu-text” class and not A tag.

    Let us know if you have any other questions and enjoy the rest of your day :)

    Regards,
    Yigit

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • The topic ‘Reduce border thickness of a full width sub-menu’ is closed to new replies.