How to change color of navigation bar and background border of header in style 4

Home Forums Jevelin Theme How to change color of navigation bar and background border of header in style 4

Home Forums Jevelin Theme How to change color of navigation bar and background border of header in style 4

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
  • MrVanDigital
    Participant

    I’m having difficulty getting rid of the white in the following background: (see attachment) for header style 4 on Jevelin.

     

    I’m sure I found a setting that altered this on mobile and also changed the colour of the border to the header in desktop but now I’ve been through the settings twice and still can’t find it.

     

    I want the white area on mobile to be transparent BUT then I want the hamburger style options menu to be visible (perhaps with a half opaque background like the great CSS code you gave me for the following site to make the icons and top menu links more visible on desktop:

    http://romex.mrvandigital.com/)

     

    The problem is I find it pretty confusing what is top bar, header, menu navigation as when I change the settings, it doesn’t always work as anticipated. Perhaps a guide on different areas and settings would help?

     

    Thanks so much for your great support, however.

    Attachments:
    You must be logged in to view attached files.

    Hi @MrVanDigital,

     

    I hope you are well today and thank you for your question.

     

    Have you tried using below custom CSS code that I shared you previously to display mobile hamburger menu?

     

    .primary-mobile-light .sh-header-mobile:not(.sh-sticky-mobile-header-active) .c-hamburger:not(.is-active) span,
    .primary-mobile-light .sh-header-mobile:not(.sh-sticky-mobile-header-active) .c-hamburger span:before,
    .primary-mobile-light .sh-header-mobile:not(.sh-sticky-mobile-header-active) .c-hamburger span:after {
        background-color: rgba(80,80,80,1) !important;
    }

     

    If you want to achieve something else then please tell me a bit more in detail.

     

    Best regards,
    Shufflehound team

    MrVanDigital
    Participant

    Thanks Shufflehound. This helps to make the hamburger visible on mobile and is useful code. Thanks for sharing. However, my question is more focused on how to make the white section transparent. Before it wasn’t showing as white. Also, on desktop the area highlighted yellow (in the attachment) used to be transparent. It’s now white. Which of the settings changes this or do I need custom code? It used to be transparent but now it’s changed to white and I can’t find which setting to change.

    Attachments:
    You must be logged in to view attached files.

    MrVanDigital
    Participant

    How do I make the amount of white shown at the bottom of the stripes less, for desktop?

     

    I actually like the way it is white on mobile so long as I show the logo.

    It is transparent but not looking so because the background color is white.

    Could you please try using below custom CSS code?

     

    .primary-desktop .sh-header-top {
        padding-bottom: 0;
    }
    #content > .fw-page-builder-content section.sh-section {
        padding-top: 0;
    }

    MrVanDigital
    Participant

    Thanks. How do I get it so that it doesn’t activate on mobile? Thanks.

    What do you want to not activate on mobile?

     

    Please describe it a bit more in detail.

    MrVanDigital
    Participant

    So when I add the code above, it gets rid of a small area of white under the added logo and banner on desktop (=great!) but it also removes the white from the top menu on mobile and makes it transparent but the logo is white so on mobile looks better with a white background. However, I still want to remove the small area of white on desktop but keep the white background on mobile. (see attachment for the white area I want to keep on mobile)

    Attachments:
    You must be logged in to view attached files.

    To achieve that please try changing above shared custom CSS code as following.

     

    @media (min-width: 1025px){
    .primary-desktop .sh-header-top {
        padding-bottom: 0;
    }
    #content > .fw-page-builder-content section.sh-section {
        padding-top: 0;
    }
    }

    MrVanDigital
    Participant

    Yep. Works a treat. Thanks.

    MrVanDigital
    Participant

    I think I added a reply to this in the wrong topic. Apologies for that. I’ve got a few threads going on 😉

     

    So, this works great on the home page menu/top bar on mobile:

     

    http://romex.mrvandigital.com/

     

    But how do I make it so that it is like this on all pages and posts with the white background?

     

    On some pages it is fully transparent e.g. http://romex.mrvandigital.com/products/

     

    And on some it is light gray e.g. http://romex.mrvandigital.com/projects/

     

    Anything other than white on mobile and the logo looks terrible and you can’t really see the hamburger options.

     

    Thanks again. I really appreciate your support.

     

     

    To do that try using below custom CSS code.

     

    .primary-mobile-light .sh-header-mobile {
        background-color: #fff!important;
    }
Viewing 12 posts - 1 through 12 (of 12 total)