Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #1231399

    Hi,

    I found this code in another thread, to use screen full width to display my main menu on screens from 990px:

    @media only screen and (min-width: 990px) {
    #header_main_alternate .container {
        width: 100%!important;
        max-width: 100%!important;
        padding: 0;}
    }

    It works correctly but there is a problem: one of my dropdown menu is not centered anymore (see screenshot in private content).
    How do I need to modify my code to apply it to my menu ONLY?
    Thanks a lot!

    If needed, you can find a link and credentials to my website in private content.
    Thanks a lot!

    #1231948

    Hey fcp,

    Thanks for the screenshot and sorry for the late reply. I’m not sure I understand the problem though, is it that the 2 4/4 rows are not centered?

    Best regards,
    Rikard

    #1232103

    Hi Rikard,
    Thanks for your reply.
    On Screenshot 1, my “NOS UNIVERS” dropdown menu as it used to be without the code above.
    On Screenshot 2, my dropdown menu with the code above.
    So what I’m looking for is what do I need to add to my code to apply it to my menu only, not on my “NOS UNIVERS” dropdown menu.

    #1233099

    Hi guys,
    Any help on this? :-(
    Thanks a lot! ;-)

    #1233434

    Hi,

    Sorry for the late reply. Please try the following in Quick CSS under Enfold->General Styling:

    #menu-item-2080 .avia_mega_div {
        left: -100px !important;
    }

    Best regards,
    Rikard

    #1233598

    Hi Rikard,
    Thanks for your reply.
    I’m sorry but I don’t need to move my dropdown menu, because with this code it will never be centered on all screen sizes.
    I would need to know which element I need to target in my original code, to display my main menu full width on screens from 990px, but without influencing my “NOS UNIVERS” dropdown menu

    #1234040

    Hi,

    Thanks for the clarification, I’m not sure I understand your intentions though. Could you try to explain a bit further or post a more descriptive screenshot highlighting what you would like to achieve please?

    Best regards,
    Rikard

    #1234247

    Hi Rikard,

    Ok, this is how my main menu looks like on screens a little bit larger than 990px, without any code:
    Screenshot 1
    As you can see, there is an issue: my menu is too large and some items are behind others.

    So I added this code, to use the full screen width and everything is ok like this (Screenshot 2):

    @media only screen and (min-width: 990px) {
    #header_main_alternate .container {
        width: 100%!important;
        max-width: 100%!important;
        padding: 0;}
    }

    The only thing I need is adding or modifying something in my code to TARGET MY MAIN MENU ONLY, NOT MY DROPDOWNS.
    Because as you can see on Screenshot 3, my first dropdown is not centered anymore like it used to be.
    And I can not add some code to move it like you gave me before, because it will work for some screen widths and not others, so this is can not be a solution.
    So what do I need to add to my code or how do I need to change it, to target MY MENU ONLY?

    Thanks!

    #1234709

    Hi,

    Thanks for the clarification, I understand now. Maybe it would be better if you simply switched to the burger menu at an earlier point? Then you wouldn’t need the code which is causing the problem with the mega menu. If you want to try it out then you can add this to Quick CSS in order to activate the burger menu on tablets in landscape as well:

    @media only screen and (max-width: 1024px) {
      nav.main_menu {
        display: block !important;
      }
      #avia-menu .menu-item {
        display: none;
      }
      .av-burger-menu-main.menu-item-avia-special {
        display: block;
      }
    }
    

    Best regards,
    Rikard

    #1239626

    Hi Rikard,
    Thanks for your reply.
    Unfortunately, switching to the burger menu on tablets in landscape can not be an option for me.
    Isn’t there any solution to aim my menu only and not my submenu??

    #1241313

    Hi,
    I finally found a solution for this.
    The topic can be closed.
    Thanks

    #1241857

    Hi,
    Glad to hear you have it sorted out now, we will close this now. Thank you for using Enfold.

    For your information, you can take a look at Enfold documentation here
    For any other questions or issues, feel free to start new threads in the Enfold forum and we will gladly try to help you :)

    Best regards,
    Mike

Viewing 12 posts - 1 through 12 (of 12 total)
  • The topic ‘Main menu full width’ is closed to new replies.