Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • September 19, 2019 at 7:02 pm #1140011
    Cloaker

    Hi!

    Is it possible to get the right sidebar menu vertically centered like in the picture attached? The Idea would be to get the menu that is normally positioned to the top of the page to be centered instead. Also would it be possible to get the logo to the top left corner of the page and the menu to the right sidebar?

    September 22, 2019 at 10:05 am #1140607
    Rikard

    Hey Cloaker,

    I’m sure that it would be possible, but there is no layout like that in the theme by default unfortunately.

    Best regards,
    Rikard

    September 23, 2019 at 12:46 pm #1141000
    Cloaker

    Hi!

    Yes, i know that there’s no layout like that. I was wondering could I center the menu with some code?

    I used this combination:

    .av-main-nav > li > ul *,.av-main-nav > li > ul { background-color: transparent!important; }

    .header_bg { background-color: rgba(0,0,0,0)!important; }
    #main { margin-right: 0px !important; }

    span.avia-menu-text { text-align: right; }

    span.avia-menu-text {padding-top: 12vh!important;}

    /* Transparent header on mobile */
    @media only screen and (max-width: 767px) {
    #top #wrap_all .av_header_transparency,
    .av_header_transparency #advanced_menu_toggle {
    background: transparent!important;
    position: absolute!important;
    }}

    That would work but every main menu item gets its own padding (I’d like the menu items to be close together and centered)

    September 24, 2019 at 6:51 am #1141231
    Rikard

    Hi,

    If you need help then we need to be able to see the results you are getting. Please post a link to where we can see the actual elements.

    Best regards,
    Rikard

    September 24, 2019 at 2:19 pm #1141395
    Cloaker

    Hi!

    Sorry, yeah, here are the info. The site is just a test before I start the real site project

    September 26, 2019 at 4:38 am #1142104
    Ismael

    Hi,

    Thank you for the update.

    You should remove the top padding applied to the menu text to get rid of the space between the menu items.

    span.avia-menu-text {
    padding-top: 12vh !important;
}

    Let us know if that helps.

    Best regards,
    Ismael

    September 26, 2019 at 3:41 pm #1142311
    Cloaker

    Yes, but I want the items to be centered to the center of the page. (So is there a way to get the top padding to apply just to the first menu link? or any other way of achieving it?) …Since now that I deleted the top padding from all the links, the menu items are all at the top of the page. Please see the picture I’m trying to achieve (the first post)

    September 29, 2019 at 3:24 am #1143056
    Mike

    Hi,
    To center the sidebar menu vertically in the top color section please try this css:

    #header .avia-menu {
  height: 70vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

    2019-09-28-211126
    How it works is by forcing the outer container of the menu to be 100% of our total height, so I choose the height of the top color section and subtracted the height of the logo that we want to leave at the top of the page, thus about 70vh, then the inner container is centered in that.

    If you wanted the menu centered on the whole page and not visible until it was scrolled, then just make the outer container 100% high of the whole page.

    Best regards,
    Mike

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.