Navigation

This content is old and no longer supported. You may use at your own risk, but no official support will be provided for anything listed here. If you are a Themeco customer, we invite you to check out our new community and forums, Apex.

Tagged: 

  • Author
    Posts
  • #1422888

    MattHoll
    Participant

    Hello.

    I added this code here to format the navbar. When on a smaller monitor, the menu wraps to a second line and I want that second line centered. See first attachment for how that looks.

    body .x-navbar .x-nav-wrap.desktop .x-nav li {
    float: none;
    display: inline-block;
    }

    body .x-navbar .x-nav-wrap.desktop .x-nav {
    width:100%;
    text-align:center;
    }

    The problem there, though, is that it messed up the formatting on my dropdown menus. Please see second attachment.

    I used the following code earlier in the CSS to format those menus. I got rid of a frame around them, got rid of those rounded corners, etc. I would like the menus to go back to looking like the third attachment. If I delete the code for centering the wrapped menu that is above, that fixes it, but then the menu does not center when it wraps.

    Here’s the menu customization from earlier in the CSS:

    .x-navbar .desktop .sub-menu {
    padding:0;
    }

    /* individual color controls for each nested level of submenu */

    /* first level submenu */

    .x-navbar .desktop .sub-menu a {
    color: rgb(32, 28, 64);
    }

    .x-navbar .desktop .sub-menu, .x-navbar .desktop .sub-menu a {
    background-color: rgb(224, 219, 194);
    font-size: 14px;
    }

    /* sub menu background color and text color on hover */
    .x-navbar .desktop .sub-menu a:hover {
    background-color: rgb(90, 100, 124);
    color: #f2c054;
    }

    /* second level submenu */
    .x-navbar .desktop .sub-menu .sub-menu a {
    color : rgb(32, 28, 64);
    }

    .x-navbar .desktop .sub-menu .sub-menu, .x-navbar .desktop .sub-menu .sub-menu a {
    background-color: rgb(200, 196, 174);
    font-size: 14px;
    }

    /* sub menu background color and text color on hover */
    .x-navbar .desktop .sub-menu .sub-menu a:hover {
    background-color: rgb(90, 100, 124);
    color: #f2c054;
    }

    So, my question is, is there a better way to write that CSS that I posted up top to center the navbar menu when it wraps to a second line? I do NOT want it wrapping on large monitors, but for smaller monitors it should wrap as it currently does and be centered on both lines.

    The site is here:

    http://www.hrvatskohomebrewprvenstvo.beer/

    Any help is greatly appreciated.

    -M

    Attachments:
    You must be logged in to view attached files.
    #1423820

    Lely
    Moderator

    Hi M,

    Please add the following CSS for the submenu to remove round corners like on screenshot 3

    .masthead-stacked .x-navbar .desktop .sub-menu .sub-menu, .masthead-stacked .x-navbar .desktop .sub-menu {
        border-radius: 0;
    }

    If you want those CSS to work on certain size only, we can use media query like below:

    @media (min-width: 980px)  and (max-width:1100px){
      /*Add your CSS here and feel free to adjusr min and max value*/
    }

    Now, no need to position each 2nd level submenu. Please check the following CSS:

    .masthead-stacked .x-navbar .desktop #menu-item-1734 .sub-menu .sub-menu {
        left: auto;
        right: calc(100% + 30px);
    }

    You may update above CSS to the following so it will cover everything:

    .masthead-stacked .x-navbar .desktop .sub-menu .sub-menu {
        left: auto;
        right: calc(100% + 30px);
    }

    Hope this helps.

    #1423884

    MattHoll
    Participant

    Thanks for the help!

    There are still some formatting issues I’d like to fix if possible, please.

    Please compare the first and second screen capture attached here. The second one is the way I want it to look. The way it is now, that blue-grey background color does not fill the entire dropdown item. I want it to fill that all the way.

    Also, there is a gap, and open space between the first dropdown and second drop down. I would like to get rid of that space so they are touching.

    Any help is greatly appreciated. Thanks!

    Attachments:
    You must be logged in to view attached files.
    #1424734

    Rad
    Moderator

    Hi there,

    Please change this CSS

    .masthead-stacked .x-navbar .desktop .sub-menu .sub-menu {
        left: auto;
        right: calc(100% + 30px);
    }

    to this

    .masthead-stacked .x-navbar .desktop .sub-menu .sub-menu {
        left: auto;
        right: 100%;
    }

    And please remove this

    body .x-navbar .x-nav-wrap.desktop .x-nav li {
        float: none;
        display: inline-block;
    }

    Thanks.

    #1425091

    MattHoll
    Participant

    Thanks for the help, but if I remove this:

    body .x-navbar .x-nav-wrap.desktop .x-nav li {
    float: none;
    display: inline-block;
    }

    Then the second line of the menu when it wraps is not centered, like in the attachment. I want that second line centered.

    Attachments:
    You must be logged in to view attached files.
    #1425188

    Christian
    Moderator

    We’re sorry but further customizations from here would be getting into custom development, which is outside the scope of support we can offer. If you need more in depth changes, You might want to contact our trusted partners who caters X setup and customization needs. Please see https://community.theme.co/custom-development/. Thanks for understanding.

Join Apex

This content is old and no longer supported. We invite you to check out our new community and forums, Apex.

Join Apex