Tagged: ,

Viewing 26 posts - 1 through 26 (of 26 total)
  • Author
    Posts
  • #235046

    Hi,

    At alloelectricien.lu, after update to 2.6, I have some issues with the header. I’ve over viewed the custom css and fixed some of them but I still have some left.

    1) I’ve used this code before to /*DISABLE VERTICAL LINES IN MENU */:

    .bottom_nav_header.social_header .main_menu ul:first-child>li:first-child a {
    border: none;
    }
    .bottom_nav_header.social_header .main_menu ul:first-child>li a {
    border: none;
    }

    but I still have one line left at the beginning of the header. How I can take it out please? The website header should look like alloplombier.lu in design (which is using the previous theme version)

    2) How can I increase the header menu please? Before I’ve used the code below but now it doesn’t work any more.

    /*INCREASE MENU HEIGHT*/
    .bottom_nav_header.social_header .main_menu ul:first-child > li a {
    height: 40px;
    line-height: 40px;
    }

    3) The header menu is now set to slim and sticky. How can I make the transparent colour to not be transparent when scrolling down? as here alloplombier.lu

    4) I’ve had the secondary menu in the right of the logo as I have at alloplombier.lu now but it’s gone.
    Before update I was advised to use the code below but it seems that now its not working anymore.

    #header_meta { margin-top: -30px; }
    .sub_menu {
    top: 250%;
    }

    What can I do please?

    Thank you!

    • This topic was modified 10 years ago by costin. Reason: added another question
    #235252

    Hi!

    For 1 and 2:

    .menu-item-home a {
        border-left: 0 !important;
    }
    #header_main_alternate, .main_menu ul:first-child > li a {
        height: 40px !important;
        line-height: 40px !important;
    }
    

    Best regards,
    Josue

    #235327

    Hi,

    The solutions for 1 & 2 worked nice, thank you. Could please someone point me what to do for 3 & 4?

    Thank you!

    #236657

    Hey!

    You can set your background in the header to something else besides transparent:

    #header {
    background-color: transparent;
    }

    You can change the layout of the header in the new header options in the theme options under the Header tab.

    Regards,
    Devin

    #236808

    Hi,

    I’ve used the code provided for the header and I’ve changed the colour to white and it worked good.

    Regarding the 4th question about the header, I’ve seen the new options in the Header tab but what I need is to have a secondary menu displayed to the right of the logo on alloelectricien.lu as it’s now on alloplombier.lu (older version of Enfold). How can I achieve that please?

    Thank you!

    #237160

    Hi!

    That’s the secondary menu, you can enable it under “Extra elements” in the new header options.

    Best regards,
    Josue

    #237165

    Hi @Josue ,

    It perfectly make sense what you are saying. I’ve enabled the secondary menu but its position is Top Bar at the right as you can see it now at alloelectricien.lu. But I want it to be displayed as at alloplombier.lu. How can I achieve that please?
    At alloplombier.lu which uses an old version of Enfold I was using this code:

    #header_meta { margin-top: -30px; }
    .sub_menu {
    top: 250%;
    }

    Thank you!

    #237166

    Hi!

    Change that code to this:

    #header_meta { margin-top: -30px; }
    .sub_menu {
    top: 75px;
    position: relative;
    }

    Cheers!
    Josue

    #237170

    Great, that’s it. The last thing is how to adjust/increase the space between the separator line and the second menu item? As you can see the separator line is too close to “Devis”. I would like to have the same space as after contact…

    #237178

    Hey!

    Add this too:

    .av_secondary_right .sub_menu>ul>li:last-child, .av_secondary_right .sub_menu>div>ul>li:last-child {
        padding: 0 10px !important;
    }

    Best regards,
    Josue

    #237187

    The code worked fine, thank you very much. Is this a bug? as before was working fine…

    Please be so kind and let me know if you can help me with another thing. On pages you can see that there is a grey area under the menu as in http://awesomescreenshot.com/0892hm1de5. How can I take it out please?

    Many thanks for your help,
    Costin

    #237198

    This will fix it:

    #main {
        padding-top: 130px !important;
    }

    Best regards,
    Josue

    #237211

    Indeed the code has fixed my problem, thank you for a great support! I’ve seen that the code provided is decreasing the space between the header menu and the content as in the screenshot http://awesomescreenshot.com/0ae2hmb406
    Please advise me if there’s a way to decrease this space for all pages EXCEPT the homepage.

    Best regards!

    #237214

    Add this too:

    .home #main {
        padding-top: 155px !important;
    }
    #237228

    For what I need it I’ve used the code below. On desktop everything is fine but not on the mobile where especially on the homepage the grey area persists. Also on pages the space is bigger than it should. What should I add to the code please?

    #main {
        padding-top: 110px !important;
    }
    .home #main {
        padding-top: 129px !important;
    }
    #237240

    Try removing the !important rule and changing the selectors to:

    .html_header_top.html_header_topbar_active.html_header_sticky.html_bottom_nav_header #top #main{
        padding-top: 110px;
    }
    .html_header_top.html_header_topbar_active.html_header_sticky.html_bottom_nav_header #top.home #main{
        padding-top: 129px;
    }
    

    The first one will affect all pages and the second one only the home.

    Cheers!
    Josue

    #237291

    The homepage is fine now. On pages the space between the header menu and image remained the same. Is there something else I should try please?

    Thank you!

    #237296

    Here’s how i see it in Pages:

    Isn’t that ok?

    Cheers!
    Josue

    #237316

    On desktop (the first image) is OK but on mobile (the 2nd image) the space between logo and image is too big. Can I reduce it somehow please?

    Many thanks!

    #237325

    This is probably too small for a feature request, but you should add header layout option for “logo center menu below left” and “logo center menu below right.”

    What custom CSS can I use with the header layout: logo center menu below, yet justify the menu below to the left?

    #237471

    Hi!

    You can add this on Quick CSS or custom.css to position the bottom menu to the left:

    .html_header_top.html_logo_center .main_menu ul:first-child {
    width: 100%;
    }

    Regards,
    Ismael

    #238295

    Hi,

    As codemode has interfered with my topic I will repeat my question please:
    “On desktop (the first image) is OK but on mobile (the 2nd image) the space between logo and image is too big. Can I reduce it somehow please?

    Many thanks!”

    Thanks again!

    #238494

    Hey!

    Try adding this code to the Quick CSS:

    @media only screen and (min-width: 767px) and (max-width: 989px) {
        .html_header_top.html_header_topbar_active.html_header_sticky.html_bottom_nav_header #top.home #main{
            padding-top: 90px !important
        }
    }

    Cheers! 
    Josue

    #238571

    Hi,

    Thanks for replying! So I need the code to work on mobile devices for all pages but homepage. I think the code provided is just for the homepage as it contains #top.home #main so I’ve changed it to:

    @media only screen and (min-width: 767px) and (max-width: 989px) {
        .html_header_top.html_header_topbar_active.html_header_sticky.html_bottom_nav_header #top #main{
            padding-top: 90px !important
        }
    }

    I’ve played with the 90px but still no result. Could you please tell me if there’s anything else I can do?

    Many thanks!

    #238580

    Try this:

    @media only screen and (max-width: 989px) {
     #main main {
        padding-top: 20px;
     }
    }

    Result:

    Cheers!
    Josue

    #239957

    Seem to be working great, many thanks!

Viewing 26 posts - 1 through 26 (of 26 total)
  • The topic ‘Header issues after update’ is closed to new replies.