Viewing 16 posts - 1 through 16 (of 16 total)
  • Author
    Posts
  • #1145701

    Hi guys,

    A new website is finally finished and is ready to launch. However… there’s one little bug remaining.
    Please take a look at the screenshot below.

    Screenshot: https://imgur.com/a/uOEGNZq

    The reason could be that my CSS ( in quick css ) is sloppy. I used some CSS to change the height of the topbar. (not sure this is the cause)

    Would you mind taking a look, please? Private data is listed below.

    #1145788

    Hey mynick,

    Please try the following in Quick CSS under Enfold->General Styling:

    #header_main {
      background:#fff !important;
    }

    Best regards,
    Rikard

    #1145798

    It’s not a solution, but more of a cheeky ‘hide what is broken fix’ :D. I would like to avoid this solution.

    Also: because of this bug, my text isn’t vertically center within the visible part of the slider, you see? So yeah… I’m looking for a solution that lowers the slider so it’s not behind the navigation anymore.

    #1145999

    Hi,

    Did you try to adjust the header size under Enfold->Header->Header Size?

    Best regards,
    Rikard

    #1146048

    Hi Rikard,

    Thanks for the reply. I have tried it and it’s not working.
    New fact: It seems like the logo isn’t vertically centered anymore in the navigation. It’s always stuck at the top, no matter the height.

    I really believe it’s conflicting with the 3 lines of CSS (to style the topbar) I wrote. Could you take a closer look, please?

    #1146135

    Hi,

    Ok, so what CSS did you add? What happens if you remove them temporarily?

    Best regards,
    Rikard

    #1146168

    If I remove it the navigation is not in front of the slider anymore. But the logo is still vertically aligned at the top of the navigation container, no matter what I do.… I cant imagine it’s because of something I did with my Quick CSS.

    If I remove all Quick CSS the logo still isn’t centered. So this gives me reason to believe that there is something wrong with the logo or Enfold… I dont know.

    Quick CSS I used:

    /* TOPBAR */
    #header_meta {
    min-height: 55px;
    }
    
    #top #header_meta {
    background: #a6022e;
    }
    
    /* Hide Topbar on mobile */
    @media only screen and (max-width: 767px) {
        #header_meta {
            display:none;
        }
    }
    
    #top #header_meta li {
    border: none;
    margin-top: 13px;
    margin-left: 25px;
    }
    
    #top #header_meta li a {	
    color:#ffffff;
    font-size: 16px;
    font-weight: normal;
    }
    
    #top #header_meta li a:hover {	
    color:#fafafa;
    text-decoration: none;
    }

    Feel free to log-in and see for yourself. It should be fairly straightforward. The error can be seen on the homepage.

    #1146172

    Hi!

    I added following code to bottom of Quick CSS field

    .html_header_top.html_header_sticky #top #wrap_all #main {
        padding-top: 205px !important;
    }

    Please review your website :)

    Best regards,
    Yigit

    #1146176

    This seems to be a step in the right direction. However it does not show the desired result on mobile. Also the logo remains uncentered.

    Maybe it’s not the css I used, but something else? Something with the logo…

    #1146369

    Hi,

    You can set a different value for mobile:

    @media only screen and (max-width: 767px) {
    .html_header_top.html_header_sticky #top #wrap_all #main {
    padding-top: 105px !important;
    }
    }

    Best regards,
    Rikard

    #1154016

    Guys,

    I really appreciate the help, but this isn’t going anywhere. You’re proposing solutions that don’t fix the issue completely, just partially. This while by default (the default ENFOLD) is as I want it to be.

    The desired effect is:
    – A navigation that is above, not behind, the slider below
    – A logo vertically centered within the navigation

    A possible cause is:
    – My own Quick CSS which is barely anything. Most likely the CSS I used to edit the topbar, although I’m not sure.

    Could somebody please take another look? I honestly thought this would be a quick & easy fix :p.

    Private data can be found in the first post.

    #1154385

    Hi mynick,

    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

    
    .logo img {
        margin-top: 35px;
    }
    #top .header-scrolled .logo img {
        margin-top: 0px;
    }
    

    If you need further assistance please let us know.

    Best regards,
    Victoria

    #1156030

    Hi Victoria,
    Thanks for the CSS. It works, however it’s not as smooth as ENFOLD out of the box. I guess it will do for now.
    I found out what is pushing the navigation over the photo below. It’s this line of CSS:

    /* TOPBAR */
    #header_meta {
    min-height: 55px;
    }

    Screenshots of with/without my custom CSS in Quick CSS.

    View post on imgur.com

    I guess I’m increasing the height of the topbar in a wrong way? Can somebody help me with adding the correct CSS?

    #1156659

    Hi,

    Thank you for the update.

    The background of the first section is showing behind the transparent header background. You have to adjust the padding above the main container so that it is positioned at the very bottom of the header container. Please add this css code to adjust the top padding.

    .html_header_top.html_header_sticky #top #wrap_all #main {
    	padding-top: 205px;
    }

    Best regards,
    Ismael

    #1157838

    Hi Ismael,

    It is confusing to me to add this CSS, because I do not know if I need to use the other css from other posts.
    I did add your code, cleared cache, and it does not seem to work.

    Would you mind taking another look? If it’s easier for you… you have my permission to fix this directly. I have a backup ready :).

    #1158757

    Hi,

    It is confusing to me to add this CSS, because I do not know if I need to use the other css from other posts.

    Sorry for the late response. You have to append the css code to the bottom of the previous ones. Make sure to toggle the Performance > File Compression settings after adding it.

    We would like help you with it, but the site is not accessible on our end because it has SSL issues. Please contact your hosting provider and ask them to help you correct the SSL certificates.

    Best regards,
    Ismael

Viewing 16 posts - 1 through 16 (of 16 total)

You must be logged in to reply to this topic.