Okay
  Public Ticket #2025317
Top Menu Position
Closed

Comments

  • brandymessage started the conversation
    May 26, 2019 at 11:00pm

    Hi,

    i'm using the standard menu and i'm looking for a way to to center it. Also i'd like to move it a few pixels to the top so it aligns with the top frame of the logo.

    Thanks,

    Chris

  •  1,559
    Laborator replied
    May 27, 2019 at 10:00am

    Hi Chris,

    To center the menu and make it show in line with the top border of the frame you will have to use custom CSS, so add this CSS to Custom CSS:

    .main-header.menu-type-standard-menu .standard-menu-container .menu-bar, .main-header.menu-type-standard-menu .standard-menu-container>nav {
    margin: 0 auto !important;
}
header.main-header .logo-and-menu-container .menu-column {
    align-self: flex-start;
}

    Best regards,
    Laborator Team

      Documentation         Join Kalium Users Group

  • brandymessage replied
    May 27, 2019 at 11:18pm

    Worked perfectly, thanks. Let me add another wish: I want the menu items to show up like buttons with dark background (#272727) and white text - no rounded corners, just a box around the text and an orange line (#ffa800) at mouse over like in the attached screenshot. That would be great.

  •  1,559
    Laborator replied
    May 28, 2019 at 8:09am

    Use this CSS for changing the menu item look:

    .main-header.menu-type-standard-menu .standard-menu-container div.menu>ul li, 
.main-header.menu-type-standard-menu .standard-menu-container ul.menu li{
    margin-left: 45px;
    background: #272727;
    padding: 10px;
}
.main-header.menu-type-standard-menu .standard-menu-container.menu-skin-dark div.menu>ul>li>a:after, .main-header.menu-type-standard-menu .standard-menu-container.menu-skin-dark ul.menu>li>a:after {
    background: #ffa800;
}
.main-header.menu-type-standard-menu .standard-menu-container.menu-skin-dark div.menu>ul>li>a, .main-header.menu-type-standard-menu .standard-menu-container.menu-skin-dark ul.menu>li>a {
  color: #FFF;
}

    Best regards,
    Laborator Team

      Documentation         Join Kalium Users Group

  • brandymessage replied
    May 28, 2019 at 11:59am

    Hey Art,

    worked finde again, but my idea was bad. I'd like the menu to float right next to the logo like in the attachment.

    Thanks for your support!

  •  1,559
    Laborator replied
    May 29, 2019 at 9:53am

    Hi again,

    Add this CSS to Custom CSS:

    .menu-items-blocks {
    -webkit-box-pack: start;
    -webkit-justify-content: flex-start;
    justify-content: flex-start;
}
.main-header.menu-type-standard-menu .standard-menu-container .menu-bar, .main-header.menu-type-standard-menu .standard-menu-container>nav {
    margin: 0 !important;
}

    P.S. Please note these are all customizations which are out of the support scopesmile.png

    Best regards,
    Laborator Team

      Documentation         Join Kalium Users Group