Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • December 13, 2017 at 11:49 am #888273
    Archie

    Hi there Enfold team!

    I would like to make the menu center aligned on all screen sizes.

    On a 15.6″ screen with 1366×768 resolution, header setting as “menu right logo left”, the menu becomes centered using the following CSS:

    .main_menu {
    right: 20%;
    }

    However, the menu becomes aligned too far to the right on 14″ screen monitors as well as 7″ tablets and iPads. (I am using a 15.6″ screen monitor 1366×768 resolution).

    Can we set the right padding so that it is centered on all/different screen sizes?

    I have the header set to “logo top menu bottom” in the mean time while waiting for a fix.

    Thank you so much!

    December 13, 2017 at 3:53 pm #888391
    Victoria

    Hey hackoffseries,

    Here is the code you can put in Enfold > General Styling > Quick Css,  if it does not work, put into themes/enfold/css/custom.css

    
nav.main_menu {
    left: 50%;
    transform: translateX(-50%);
}

    If you need further assistance please let us know.

    Best regards,
    Victoria

    December 14, 2017 at 5:48 am #888748
    Archie

    Hey Viktoria!

    Thank you for your quick response!

    I used the code you sent and the menu items broke.

    https://prnt.sc/hn8ut2

    The current settings are as follows:
    Logo: transparent blank image
    Menu and Logo Position: Logo left, Menu right
    Appearance > Menu: Custom link in between “Services” and “Portfolio” with navigation label:

    <img class="wp-image-425 size-full aligncenter" style="margin-bottom: 35px; margin-top: 5px;" src="https://mikeschwab.arcawebsolutions.com/wp-content/uploads/2017/09/AMSlogonew.png" alt="" width="200" height="93" />

    Can you help please?

    Thank you! :)

    • This reply was modified 7 years ago by Archie.
    December 14, 2017 at 3:06 pm #888918
    Victoria

    Hi hackoffseries,

    Here is the code you can put in Enfold > General Styling > Quick Css,  if it does not work, put into themes/enfold/css/custom.css

    
nav.main_menu {
    left: 50%;
    transform: translateX(-33%);
    width: 80%;
}
div .logo {
  width: 0px;
}

    If you need further assistance please let us know.

    Best regards,
    Victoria

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