Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • November 1, 2016 at 9:08 pm #706857
    atrixdave

    Hey guys,

    I’m having trouble figuring out how to get my navigation to show up a certain way on one of my clients sites. She wants the logo aligned left with 10-20% margin on the left, and the rest of the navigation to display centered to the right of the logo.

    Here is the site: http://trose2.atrixdesign.com/

    I can get it to work on certain resolutions but not all.

    Can you assist?

    PS – You have the best support ever!

    Thanks,

    Dave

    November 3, 2016 at 4:37 am #707496
    Rikard

    Hi Dave,

    The menu is aligned right on my end and it looks good imo, is that how it’s supposed to look or do you want to change that? Please try to explain a bit further or post a screenshot highlighting the changes you would like to make.

    Best regards,
    Rikard

    November 3, 2016 at 7:54 am #707609
    atrixdave

    Hi Rikard,

    I would like the navigation aligned in the middle between the logo and the right side of the window.

    See this site for an example of how I want it to display: http://www.markdelong.com/

    Thanks,

    D

    PS – This is my client’s request not mine >:-/

    November 4, 2016 at 5:37 am #708032
    Rikard

    Hi,

    Ok, thanks for that. Please try the following in Quick CSS under Enfold–>General Styling:

    .main_menu {
    position: initial !important;
    width: auto !important;
    display: table !important;
    margin: 0 auto !important;
}

    Best regards,
    Rikard

    November 4, 2016 at 6:12 am #708042
    atrixdave

    Looks great on all resolutions 1280 and larger…this is how it looks on a 10-12″ monitor with 1024 resolution:

    http://trose2.atrixdesign.com/img/trose-home.jpg

    Any way we can get it to center on those resolutions too?

    Thanks so much!

    Dave

    November 7, 2016 at 8:06 am #709060
    Rikard

    Hi Dave,

    Sorry for the late reply. You mobile menu activates at 1024 pixels so maybe it would be better to hide the regular menu and let users use the mobile menu? If you want to go with that option you can use this CSS to hide it for screens below 1024 pixels:

    @media only screen and (max-width: 1024px) {
.main_menu {
  display:none !important;
}
}

    Best regards,
    Rikard

    November 9, 2016 at 8:44 pm #710437
    atrixdave

    Hi Rikard,

    Thanks for the reply. This is a good option, but the code you suggested isn’t working properly. The navigation still displays and the mobile menu doesn’t.

    Can you please check it out?

    FYI I changed the max-width to 2000px.

    Thanks,

    Dave

    November 11, 2016 at 12:40 pm #711102
    Ismael

    Hi!

    Decrease the padding and font size of the menu items.

    @media only screen and (max-width: 1200px) {
     .av-main-nav > li > a {
          padding: 0 7px;
         font-size: 11px !important;
     }
}

    Make sure that the Header > Mobile Menu > Header Mobile Menu activation is set to the second option.

    Best regards,
    Ismael

    November 11, 2016 at 7:40 pm #711326
    atrixdave

    Thank you Ismael! I hope this works for the client :)

  • Author
    Posts
Viewing 9 posts - 1 through 9 (of 9 total)
  • The topic ‘Navigation Alignment’ is closed to new replies.