badget

Biggest Sale! Special Offer!

Get 30% discount on all of our single themes with this coupon code: #30%SALE

Hurry up! *Limited time offer*

How to create bar line on the header

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #97560
    Destino Nzonzidi
    Participant

    Please look at this website https://tele50.cd/, it has red lines below the Main header and on top header. Please how can I create them. I want to put it on my website, https://www.kinzonzi.net/

    #97582

    Hi,

    Please go to ‘Appearance > Customize > Additional CSS’ and paste the below Custom CSS code.

    :root {
    	--bar_color: blue;
    }
    
    .info-bar,
    .navbar {
    	border-style: solid;
    	border-width: 0;
    	border-color: var(--bar_color);
    }
    .info-bar {
    	border-top-width: 5px;
    }
    .navbar {
    	border-bottom-width: 5px;
    }
    
    @media(max-width: 991px) {
    	.navbar {
    		border-bottom: 0;
    	}
    	.navigation-bar-top {
    		border-style: solid;
    		border-width: 0;
    		border-bottom-width: 5px;
    		border-color: var(--bar_color);
    	}
    	
    }

    You can change the color value ‘blue’ to any other desired one.

    Thanks

    #97584
    Destino Nzonzidi
    Participant

    It works. Thank you

    #97585
    Destino Nzonzidi
    Participant

    How to make border-bottom-width to stick on the bar please? It is disappearing when you roll down.

    #97743

    We have made minor changes to the previous code. Please copy and paste the previous code again.
    You can change the color value ‘blue’ to any other desired one.

    Thanks

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