Tagged: , ,

Viewing 19 posts - 1 through 19 (of 19 total)
  • Author
    Posts
  • July 27, 2020 at 8:29 pm #1233582
    RMConnection

    Hi Team,

    I’ve been searching around and even tried other forums to find a solution to this. Right now my main menu is too short for the logos I am trying to display in it. Is there any way to change the height of the main menu so that it is taller? Preferably in a way that matches the customer’s screen size instead of being a static size. Open to PHP or CSS solutions.

    Best,
    Jeff

    July 27, 2020 at 10:31 pm #1233601
    Jordan Shannon

    Hey RMConnection,

    Add this to quick css:

    #header_main_alternate{
padding:30px!important;
}

    Best regards,
    Jordan Shannon

    July 28, 2020 at 12:18 am #1233620
    RMConnection

    Hi Jordan,

    This is great! Is there any way to center the content in the heading now? It’s closer to the bottom of the menu than the top.

    Jeff

    July 28, 2020 at 12:20 am #1233623
    RMConnection

    Also is there any to remove the line that pops up on hover?

    July 28, 2020 at 5:09 am #1233651
    Jordan Shannon

    Hi,

    You can increase the padding to center. I’m not seeing a line on hover.

    Best regards,
    Jordan Shannon

    July 28, 2020 at 6:28 pm #1233781
    RMConnection

    Hi Jordan,

    It’s a blue line that happens when you hover over the main menu. Can I just disable the hover state somehow?

    Also, I’ve noticed with this addition that there is a small white bar at the bottom of the menu now when you scroll. I assume this is the header background color coming in. Is there any way to remove that small white bar as well? I would like it to be flush with the content.

    Jeff

    July 29, 2020 at 6:51 pm #1234003
    RMConnection

    Hi Jordan,

    I’ve also noticed that this bigger header now cuts off the content directly below it. Is there any way to push the main content further down to be flush with the new menu height?

    July 31, 2020 at 5:25 am #1234295
    Rikard

    Hi Jeff,

    Thanks for the update. Please try this CSS as well:

    #header_main {
    border-bottom-width: 0;
}

.html_header_top .header_color .main_menu ul:first-child >li > ul {
    border-top-color: #5B290E;
}

#avia-menu li:hover .avia-menu-fx {
    display: none;
}

    Best regards,
    Rikard

    August 10, 2020 at 8:04 pm #1236484
    RMConnection

    Hi Rikard,

    Thank you for the reply and sorry about the late reply. This is a great step in the right direction! The menu no longer has a bottom white border, however, it still has a small white top border along with the submenus are still surrounded in a white border. Is there any way to remove these or just color them brown as you did above?

    This also solved the blue hover line which is great! I am now wondering if we can extend the transparent white box that appears in the hover state to take up the full width and height of the logo you hover over.

    This, unfortunately, didn’t solve my problem of the page content being cut off due to the increased header size. Is there any way to push the page content so it is below the header now?

    Thank you for all of your help in this endeavor it is greatly appreciated.
    Best,
    Jeff

    August 10, 2020 at 8:18 pm #1236486
    RMConnection

    @Rikard

    August 11, 2020 at 9:21 am #1236624
    Rikard

    Hi Jeff,

    Please try this CSS for 1 and 2:

    ul.sub-menu .sub-menu-item {
    border-color: transparent;
}

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

    I’m not sure I understand the last problem though, could you post a screenshot highlighting it please?

    Best regards,
    Rikard

    August 11, 2020 at 7:00 pm #1236728
    RMConnection

    Hi @rikard,

    Thank you for your help with this. However, it doesn’t seem like either of those snippets solved either of my needs which is strange. I have noticed that the white box only seems to appear on hover on the front page which is again strange. The white borders are appearing on every page in the menu and sub-menus outside of the bottom border of the main menu. (Which you solved.)

    As far as the last problem goes I have attached two pictures below. The first is of the menu how it is right now. The second is of the menu’s original height. (Ignore the Kakadu Logo). As you can see when the menu’s height is extended it seems to cover up any content or white space I have right below it instead of just pushing the content down to match the original spacing. I could add some spacers above the content on some pages to make up for this, but that doesn’t work with all pages like the ones made by Woocommerce or WordPress. So, I’d like to find a better solution if possible.

    Current Menu Height
    Original Menu Height

    Thank you for all of your help with this.

    Jeff

    August 12, 2020 at 2:10 pm #1236980
    Rikard

    Hi Jeff,

    Please try this instead for the first two problems:

    .av-main-nav ul li a, .av-main-nav ul li:last-child>a {
    border: none !important;
}

.main_menu ul:first-child>li>a:hover {
    height: 65px !important;
    line-height: 65px !important;
}

    Third problem; thanks for the screenshots. I can see the larger menu on the front page, but I can’t find a page with the smaller menu. Could you link to an example page where we can see the actual problem please?

    Best regards,
    Rikard

    August 12, 2020 at 6:56 pm #1237135
    RMConnection

    Hi @rikard

    Another great step in the right direction! This solved 80% of our problem with all of the borders except the top borders on both the main menu and the sub-menu disappearing. The top borders are still white for some reason. This also added an animation to the menu items, but I like it and have tailored it to our wants.

    For the third problem, I’m not sure I understand your request. I have linked below to a couple of good pages to see how the current menu with the new size adjustment is cutting off content in the form of part of the brand logo and white space above it. It does this on every page but most pages, including the home page, have a fair bit of blank(white) space below the menu so you don’t notice it all too much outside of the odd design. and a lack of separation. I hope this helps.

    Brand it right up against menu with no separation. Should have some separation.
    The top part of the brand logo is being cut off by the menu

    I appreciate your continued help.

    Best,
    Jeff

    August 14, 2020 at 4:44 am #1237654
    Rikard

    Hi Jeff,

    Thanks for the update. Please try this CSS as well to get rid of the last borders:

    #top .av-main-nav ul ul {
    border: none;
}

    If you want to remove the “animation”, then please adjust this CSS to lower pixel values:

    .main_menu ul:first-child>li>a:hover {
    height: 65px !important;
    line-height: 65px !important;
}

    You could try 60 for example.

    Last problem; please try to set your header size to a custom value under Enfold->Header. Try 214 pixels as that seems to look good on my end when I test it in the browser. You could also try this CSS:

    .html_header_top.html_header_topbar_active.html_header_sticky.html_bottom_nav_header #top #main {
    padding-top: 214px;
}

    But setting the value in the theme options is likely a better approach.

    Best regards,
    Rikard

    August 17, 2020 at 7:46 pm #1238609
    RMConnection

    Hi @rikard,

    We are 99% of the way there! Thank you for your help so far!

    1) The CSS was able to fix the white line on the top of the submenus but for some reason wasn’t able to remove the top white border on the main menu. Which is yet another oddity.

    2) Other than that the spacing issue has been fixed thanks to your CSS! I tried the header size adjustment, but when I went that way it wasn’t including the menu in the header for whatever reason so it was just making it worse. But the CSS fixed it perfectly. So thank you again for that!

    I appreciate your continued help.

    Best,
    Jeff

    August 19, 2020 at 7:30 am #1239031
    Rikard

    Hi Jeff,

    Thanks for the update.

    1. Is it the border above the menu that you want to remove? If so then please try this CSS as well:

    #header_main_alternate {
    border-color: transparent;
}

    2. So this is working as you wish now?

    Best regards,
    Rikard

    August 19, 2020 at 6:25 pm #1239242
    RMConnection

    Hi @rikard,

    This is beautiful! Everything is working perfectly now. Thank you so much for your help in this endeavor. It is greatly appreciated.

    You can close this ticket.

    Best,
    Jeff

    August 20, 2020 at 4:56 am #1239371
    Jordan Shannon

    Hi,

    I’m glad this was resolved. If you need additional help, please let us know here in the forums.

    Best regards,
    Jordan Shannon

  • Author
    Posts
Viewing 19 posts - 1 through 19 (of 19 total)
  • The topic ‘Changing height of Main Menu’ is closed to new replies.