Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • November 2, 2017 at 6:05 am #871545
    tweetgeeb

    Hi,

    Two questions regarding menu items pls.

    1) I would like to add a thin black line underneath the main menu and full-width submenu items on hover. See screen grab: https://www.dropbox.com/s/qlda2y9a5c74p8g/screen-grab-menu-hover-line.JPG?dl=0

    2) On the home page, I have used the full-width submenu. The options are to position left, right or center. But I would like to achieve a look that has the first menu item in line with the content below it and the remaining menu items further to the right but also in line with the contents below.

    See screen grab: https://www.dropbox.com/s/ze0uolwfzgihbq8/screen-grab-submenu-inline-with%20contents%20belwo.JPG?dl=0

    Thank you for your support.

    November 4, 2017 at 8:48 pm #872598
    Mike

    Hey tweetgeeb,
    For the line under your menu items, try this code in the General Styling > Quick CSS field:

    .av_minimal_header .avia-menu-fx {
    display: block!important; 
    background-color: #000 !important;
}

    For your second question, try setting your menu position right and using this code to move the first menu item to the left:

    .page-id-622 #menu-item-2189 {left: -20%!important; }

    adjust to suit.
    Best regards,
    Mike

    November 5, 2017 at 3:32 am #872652
    tweetgeeb

    Hi Mike,

    Thanks for your speedy reply.

    Re first query – this worked, however, I am trying to achieve a thinner line that sits closer to the menu item. Using the CSS provided, it created a thick line with too much space between the menu item and line. Anything to help fix this?

    Re second query – I’ve set the menu to the right and then adjusted the left menu item with the CSS provided, which worked perfectly, however, the menu item that we fixed to the right is too far to the right – how do I make the last menu item on the right hand side sit in line with the contents underneath?

    Thanks for your help – great theme!!

    November 5, 2017 at 4:24 pm #872766
    Mike

    Hi,
    #1: Replace the above code with this.

    .av_minimal_header .avia-menu-fx {
    bottom: 10px!important; 
    height: .5px!important;
    display: block!important; 
    background-color: #000 !important; 
}

    #2: Add this code with the above.

    #top.page-id-622 .av-subnav-menu {
    margin: 0 2%!important; 
}

    Best regards,
    Mike

    November 6, 2017 at 9:10 am #872938
    tweetgeeb

    Thanks, Mike, The full-width sub menu now sits perfectly.

    Can you provide a little more help to ensure there is a thin line under the menu item on hover as per https://goforthcreative.com/

    If possible I need this to show up on both the main menu and the full-width submenu.

    Thank you

    November 6, 2017 at 11:55 am #872981
    Mike

    Hi,
    try adjusting the [height: .5px!important;] to .3px or to suit
    2017-11-06_045310
    Also clear site and browser cache after changes.

    Best regards,
    Mike

    November 7, 2017 at 2:03 am #873474
    tweetgeeb

    Hi Mike,

    Thanks again – the line height is now great and showing up on the full-width submenu which I’ve used on the home page only – however, no underline showing up on all other pages where the main menu is used. For example:

    ABOUT

    Hoping you can help. :)

    Thanks,

    November 7, 2017 at 3:46 pm #873753
    Victoria

    Hi tweetgeeb,

    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

    
.header_color .main_menu ul:first-child > li a:hover {
  text-decoration: underline;
}

    If you need further assistance please let us know.
    Best regards,
    Victoria

    November 9, 2017 at 2:56 pm #874668
    tweetgeeb

    Thanks, Victoria, the underline works perfectly. However, I have made changes to the images underneath the fullwidth submenu and now the location of the menu items are thrown out and the previous CSS not working.

    Can you advise how to reposition the menu on this page as per screen grab https://www.dropbox.com/s/ze0uolwfzgihbq8/screen-grab-submenu-inline-with%20contents%20belwo.JPG?dl=0

    Thank you kindly.

    November 9, 2017 at 4:35 pm #874750
    Victoria

    Hi tweetgeeb,

    I’m sorry, but the screenshot above does not give me much. Do you have another mockup?

    Best regards,
    Victoria

    November 10, 2017 at 3:37 am #874932
    tweetgeeb

    Hi Victoria, Thanks for getting back to me so quickly. Here is the full page mockup – where you can see how I would like the positioning of the menu.

    https://www.dropbox.com/s/kv6hzy3oo6ppj52/Kelsey_Hutchinson_website_design%20%282%29.1.pdf?dl=0

    Currently, mine does not line up as per mockup.

    Thanks,

    November 11, 2017 at 2:36 pm #875454
    tweetgeeb

    Thanks again Victoria, hoping the mock-up can shed some light on how I need the menu to be positioned on this page.

    Also, when I look at the current menu on Ipad it does not sit correctly either.

    Thank you

    • This reply was modified 7 years, 1 month ago by tweetgeeb.
    November 12, 2017 at 11:37 am #875700
    Victoria

    Hi tweetgeeb,

    With the way you added images to the page, it is very hard to position them as on the image and keep them like that on all screen sizes.

    I would suggest you experiment with the masonry element and big gap setting. It will not be the same layout but will be more fluid and responsive and will not take that many efforts to adjust and control.

    Best regards,
    Victoria

    November 13, 2017 at 6:35 am #875972
    tweetgeeb

    Thanks, Victoria, greatly appreciated. Will experiment.
    Pls close the ticket.

    November 13, 2017 at 12:39 pm #876086
    Rikard

    Hi,

    Great, best of luck to you. Please open a new thread if you should have any further questions or problems, I’ll close this thread for now.

    Best regards,
    Rikard

  • Author
    Posts
Viewing 15 posts - 1 through 15 (of 15 total)
  • The topic ‘Main Menu + Full Width Sub menu’ is closed to new replies.