Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • November 15, 2018 at 8:04 pm #1034115
    ballindigital

    Hi,

    Home

    I made my menu sticky on a mobile and I used the following css to drop the start of the website down so that the menu doesn’t cover the top part of the screen,

    @media only screen and (max-width: 767px) {
    .responsive #top #main {
    padding-top: 110px !important;
    }

    Everything looks good on a mobile but when I switch to the desktop view – the menu above the header changes colour?

    I want it to be a blue background with white text as the mobile view shows..

    Can you guys help please?

    Ideally I just wanted to show the phone number and keep that part sticky and not the actual menu – is there a way to do this? Or will I have to show both like it is?

    Thanks,

    Harvinder

    November 19, 2018 at 7:23 am #1035061
    Ismael

    Hey ballindigital,

    Thank you for using Enfold.

    You can use this css code to change the background color of the header top bar.

    #header_meta, .header_color #header_meta a, .header_color #header_meta p, .header_color #header_meta .phone-info {
    background: #0070e8;
    color: #ffffff;
}

    Best regards,
    Ismael

    November 19, 2018 at 1:47 pm #1035180
    ballindigital

    Hi,

    This doesn’t seem to resolve the issue as it causes another complication.

    After using this css code, when you view on a mobile device the phone number and text over in the header overlap.

    Also – the form in the main page is still unformatted.

    If you view in a desktop browser and gradually shrink the screen to a tablet/mobile view you can see what I mean.

    The complication occurs when I use this css:

    @media only screen and (max-width: 767px) {
    .responsive #top #main {
    padding-top: 110px !important;
    }

    This is to drop the top of the webpage down a bit so that the sticky header doesn’t overlap the content.

    I’ve removed it now so everything looks good except when I view on a mobile because the header overlaps the webpage.

    When I add this code everything looks ok except the format is changed when viewing on a desktop.

    The header bar changes colour.

    The form above the fold loses its format and the page generally.

    So, as the website is now, I just want to drop the header on a mobile/tablet view without throwing out the formatting on a desktop site.

    Thanks,

    Harvinder

    November 21, 2018 at 10:42 am #1035957
    Ismael

    Hi,

    I can’t see the issue on mobile view. Can you provide a screenshot? Please use imgur or dropbox.

    Best regards,
    Ismael

    November 27, 2018 at 4:28 pm #1038060
    ballindigital

    Hi Ismael,

    I’ve attached screenshots on mobile and desktop views:

    Without my CSS code

    With my CSS code

    With your CSS code

    MultiPlumb

    I’ve added in explanations..

    I hope this makes sense.

    Thanks,

    Harvinder

    December 3, 2018 at 4:33 am #1040091
    Ismael

    Hi,

    I found this code in your Quick CSS field.

    @media only screen and (max-width: 767px) {
.responsive #main {
padding-top: 0px !important;
}
}

@media only screen and (max-width: 767px) {
.responsive #top #main {
padding-top: 110px !important;
}
}

    What it does is set the top padding of the main container to 0px and then set it back to 110px. I’m not really sure which one is actually intended.

    Best regards,
    Ismael

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.