Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • February 10, 2022 at 3:39 pm #1340000
    Eleina_Shinn

    Hi, I have a mega menu on this website: https://ionafiredistrict.com/

    And two things:

    1) There does not seem to be any way to style the Mega Menu in Theme Options. And it seems to take on some of the styling from the Main Menu and some from the sub-level links, so just want to be clear how this works. My problem now is that my hover color is not working on the sub-level links in my Mega Menu. In Theme Options > Advanced Styling, I have added a “Main Menu sublevel Links” hover color of red, but it is not taking on this styling. So you’ll notice there is nothing happening upon hovering over my sub-level link.s Can you tell me how to accomplish that?

    (I’ve had to use css I found in the forum to change the background color of the Mega Menu, so maybe Mega Menus have to be styled using CSS?)

    2) The Mega Menu appears to be adding an extra column. If you look at the Mega Menu under About, I only have 4 columns of items, but it adds a blank 5th column. You’ll notice the other Mega Menu under “I Want To”, where I have 3 columns, it is adding a blank fourth column. Could you tell me why and how I can remove this and just have the number of columns I’m using ?

    Thank you!

    February 11, 2022 at 10:13 am #1340122
    Guenni007

    there is no extra column
    Did you setup as css a rule for the width of the mega-div?

    February 13, 2022 at 10:51 pm #1340416
    Mike

    Hi,
    Thank you for you patience, please see our Mega Menu documentation at the bottom under CSS Reference and you will find some styling help.
    Yet I see it doesn’t have one for mouse-over so please try this:

    #top #header #avia-menu .avia_mega_div ul.sub-menu > li a:hover .avia-menu-text {
	color:red;
}

    Your About mega menu only has four columns:
    2022-02-13_023.jpg
    currently each column has a width of 456.75px / 4 = 1827px which makes the mega menu nearly full width and the inner columns are set to left:0;
    So you could use this css to try to “center” the inner columns so it doesn’t look like an empty fifth column:

    #header .avia_mega_div.avia_mega4.twelve.units>.sub-menu {
    left: 20%!important;
}

    or you could write a rule to set the width like Guenni007 suggested:

    #header .avia_mega_div.avia_mega4.twelve.units {
    width: 1200px!important;
}
#header .avia_mega_menu_columns_4.three.units {
	width: 275px!important;
}

    but you might need to write a few rules to adjust for the screen with.
    Give each of these a try to see what will work best for you.

    Best regards,
    Mike

    February 16, 2022 at 8:01 pm #1340966
    Eleina_Shinn

    I think this is great, used the 2nd rule, but if something changes, I’m glad to have the 1st rule in my back pocket as well. Thank you!

    One more thing though, I’m not sure if you noticed, but after you hover over an item, then click on it, a white strip of color goes across it until the new page loads… do you know why it’s doing that? must be taking the white from some other styling setting or code.

    • This reply was modified 2 years, 10 months ago by Eleina_Shinn.
    February 17, 2022 at 1:12 pm #1341136
    Mike

    Hi,
    Glad to hear, I tested for the “white strip” on Windows in Chrome, Firefox, & Edge but didn’t see it, what browser and OS are you using?
    Can you make a screencast of it?

    Best regards,
    Mike

    February 18, 2022 at 4:13 pm #1341349
    Eleina_Shinn

    Actually, I just went to do that and it is not appearing any longer; so thank you!

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • The topic ‘Mega Menu Styling & Adding an Extra Column’ is closed to new replies.