Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • September 17, 2022 at 6:38 pm #1365350
    schwabino

    Hello

    My client would like to have two lines of menu links on the top nav, we tried to shorten the length of the links but the client is requesting two rows of links stacked on each other. Is there a way to do this?

    Thanks so much

    Brian

    September 17, 2022 at 7:24 pm #1365353
    Mike

    Hey schwabino,
    Thank you for your question, based on the 2017 Demo, on my test site the logo was to the left and the menu to the right:
    2022-09-17_131947.jpg
    Try this css:

    #avia-menu {
   width: 60%;
}

.av_minimal_header .main_menu ul:first-child > li a {
    height: 45px;
    line-height: 45px;
}

    the expected results:
    2022-09-17_132236.jpg
    After applying the css, please clear your browser cache and check.
    If this is not what you had in mind please link to your site with further details.

    Best regards,
    Mike

    September 18, 2022 at 6:03 pm #1365448
    schwabino

    Hi Mike

    Thanks for the code the menu did split up into 2 rows but the second row is in the slider area and I think we are going for something more like your example, maybe if you see the site you can understand – I removed the code though but here is the site – https://ufcw5.org/

    Thanks so much

    September 18, 2022 at 6:34 pm #1365452
    Mike

    Hi,
    Thanks for the feedback, try this css:

    #avia-menu {
   width: 60%;
   float: right;
}

#header_main .main_menu ul:first-child > li a {
    height: 59px !important;
    line-height: 59px !important;
}

    I added a screenshot of the expected results below.

    Best regards,
    Mike

    September 18, 2022 at 8:03 pm #1365459
    schwabino

    Thanks, Mike – but it seems to be coming up differently on my screen when I add the code – see screenshot

    Any ideas? I like your screenshot and would prefer that look if possible :)

    Thanks
    B

    September 18, 2022 at 8:32 pm #1365461
    Mike

    Hi,
    It looks like you copied the css from an email and not from the forum because the greater than symbol was code and not the symbol, I corrected it for you, please clear your browser cache and check.
    2022-09-18_006.jpg

    Best regards,
    Mike

    September 19, 2022 at 6:47 pm #1365576
    schwabino
    This reply has been marked as private.
    September 19, 2022 at 7:14 pm #1365582
    Mike

    Hi,
    Try this CSS:

    @media only screen and (min-width: 1050px) {
#avia-menu #menu-item-8282 {
    padding-left: 18%;
}
}

    After applying the css, please clear your browser cache and check.
    A screenshot of the expected results are in the Private Content area below.

    Best regards,
    Mike

    September 19, 2022 at 8:52 pm #1365604
    schwabino

    Your the man!

    September 20, 2022 at 7:45 am #1365631
    Nikko

    Hi schwabino,

    I’m glad that Mike could help you :)
    Let us know if you still need further assistance regarding the topic.

    Best regards,
    Nikko

    September 23, 2022 at 6:40 pm #1366173
    schwabino

    Hi Mike

    I was hoping you could help me with one final solution for the top navigation

    Homepage

    When I roll over the “Politics and Legislation” link the underline seems to be exceeding the link text, is there a way to fix this or maybe turn off this underline feature?

    see screenshot – https://schwabino.com/nav.png

    Thanks
    B

    September 23, 2022 at 7:03 pm #1366175
    Mike

    Hi,
    To disable the line please try this css:

    #top .header_color.av_header_transparency .avia-menu-fx {
	display: none;
}

    After applying the css, please clear your browser cache and check.

    Best regards,
    Mike

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