Tagged: ,

Viewing 26 posts - 1 through 26 (of 26 total)
  • Author
    Posts
  • March 11, 2014 at 12:07 am #235046
    costin

    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, 8 months ago by costin. Reason: added another question
    March 11, 2014 at 7:07 am #235252
    Josue

    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

    March 11, 2014 at 10:16 am #235327
    costin

    Hi,

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

    Thank you!

    March 13, 2014 at 4:21 am #236657
    Devin

    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

    March 13, 2014 at 11:05 am #236808
    costin

    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!

    March 13, 2014 at 8:25 pm #237160
    Josue

    Hi!

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

    Best regards,
    Josue

    March 13, 2014 at 8:35 pm #237165
    costin

    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!

    March 13, 2014 at 8:37 pm #237166
    Josue

    Hi!

    Change that code to this:

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

    Cheers!
    Josue

    March 13, 2014 at 8:42 pm #237170
    costin

    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…

    March 13, 2014 at 8:53 pm #237178
    Josue

    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

    March 13, 2014 at 9:17 pm #237187
    costin

    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

    March 13, 2014 at 9:30 pm #237198
    Josue

    This will fix it:

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

    Best regards,
    Josue

    March 13, 2014 at 10:05 pm #237211
    costin

    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!

    March 13, 2014 at 10:09 pm #237214
    Josue

    Add this too:

    .home #main {
    padding-top: 155px !important;
}
    March 13, 2014 at 10:19 pm #237228
    costin

    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;
}
    March 13, 2014 at 10:36 pm #237240
    Josue

    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

    March 14, 2014 at 12:29 am #237291
    costin

    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!

    March 14, 2014 at 1:01 am #237296
    Josue

    Here’s how i see it in Pages:

    Isn’t that ok?

    Cheers!
    Josue

    March 14, 2014 at 1:31 am #237316
    costin

    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!

    March 14, 2014 at 1:51 am #237325
    codemode

    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?

    March 14, 2014 at 9:10 am #237471
    Ismael

    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

    March 16, 2014 at 3:22 pm #238295
    costin

    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!

    March 17, 2014 at 6:41 am #238494
    Josue

    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

    March 17, 2014 at 9:54 am #238571
    costin

    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!

    March 17, 2014 at 10:05 am #238580
    Josue

    Try this:

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

    Result:

    Cheers!
    Josue

    March 19, 2014 at 9:56 am #239957
    costin

    Seem to be working great, many thanks!

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