Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #888273

    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!

    #888391

    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

    #888748

    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 6 years, 10 months ago by Archie.
    #888918

    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

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