Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • July 18, 2020 at 1:53 am #1231399
    fcp

    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!

    July 21, 2020 at 6:30 am #1231948
    Rikard

    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

    July 21, 2020 at 10:25 pm #1232103
    fcp

    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.

    July 25, 2020 at 12:54 am #1233099
    fcp

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

    July 27, 2020 at 6:21 am #1233434
    Rikard

    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

    July 27, 2020 at 10:24 pm #1233598
    fcp

    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…

    July 30, 2020 at 3:52 am #1234040
    Rikard

    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

    July 30, 2020 at 11:03 pm #1234247
    fcp

    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!

    August 3, 2020 at 6:12 am #1234709
    Rikard

    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

    August 20, 2020 at 9:38 pm #1239626
    fcp

    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??

    August 27, 2020 at 10:38 pm #1241313
    fcp

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

    August 29, 2020 at 11:21 pm #1241857
    Mike

    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

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