Navigation Bar content on right side logo on left side

Support
#1

Hi guys. How to set this Nav Bar with the contact or text on the right?
another question is how to drew a line like in this picture
I point out those question in 2 red arrow.

My website is : vibesintegrated.design

Thank you for your support

#2

Hi There,

Please add this custom CSS under Theme Options > CSS:

.x-navbar-wrap:after {
    position: absolute;
    content: "";
    height: 5px;
    width: 100%;
    z-index: 999999;
    background: rgba(243,226,199,1);
    background: -moz-linear-gradient(left, rgba(243,226,199,1) 0%, rgba(243,226,199,1) 40%, rgba(182,141,76,1) 66%, rgba(193,158,103,1) 99%, rgba(233,212,179,1) 100%);
    background: -webkit-gradient(left top, right top, color-stop(0%, rgba(243,226,199,1)), color-stop(40%, rgba(243,226,199,1)), color-stop(66%, rgba(182,141,76,1)), color-stop(99%, rgba(193,158,103,1)), color-stop(100%, rgba(233,212,179,1)));
    background: -webkit-linear-gradient(left, rgba(243,226,199,1) 0%, rgba(243,226,199,1) 40%, rgba(182,141,76,1) 66%, rgba(193,158,103,1) 99%, rgba(233,212,179,1) 100%);
    background: -o-linear-gradient(left, rgba(243,226,199,1) 0%, rgba(243,226,199,1) 40%, rgba(182,141,76,1) 66%, rgba(193,158,103,1) 99%, rgba(233,212,179,1) 100%);
    background: -ms-linear-gradient(left, rgba(243,226,199,1) 0%, rgba(243,226,199,1) 40%, rgba(182,141,76,1) 66%, rgba(193,158,103,1) 99%, rgba(233,212,179,1) 100%);
    background: linear-gradient(to right, rgba(243,226,199,1) 0%, rgba(243,226,199,1) 40%, rgba(182,141,76,1) 66%, rgba(193,158,103,1) 99%, rgba(233,212,179,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f3e2c7', endColorstr='#e9d4b3', GradientType=1 );
}

.x-topbar .p-info {
    float: right;
}

You can change the gradient background color on this link: https://www.cssmatic.com/gradient-generator#’-moz-linear-gradient(left%2C%20rgba(243%2C226%2C199%2C1)%200%%2C%20rgba(243%2C226%2C199%2C1)%2040%%2C%20rgba(182%2C141%2C76%2C1)%2066%%2C%20rgba(193%2C158%2C103%2C1)%2099%%2C%20rgba(233%2C212%2C179%2C1)%20100%)%3B’.

Hope it helps :slight_smile:

1 Like
#3

Wow. it’s working… Thank you so much !

By the way my first question haven’t been answered yet. How to put contact/text on the right side that inline with the logo?

Thanks

#4

Hi There,

You can add the topbar text content under Theme Options > Header > MISCELLANEOUS > TOPBAR CONTENT:

Hope it helps :slight_smile:

1 Like
#5

Hi again. i tried your suggestion. It’s appear on top bar.
I don’t want it to be at top bar.
I want it at navigation bar. in line with the logo VIBES integrated Design.
Please help

Thank you

#6

Hi @Amazone,

In that case, please add this code to your global custom javascript.

jQuery('.x-topbar').insertBefore('.x-navbar-inner .x-nav-wrap.desktop');

then this CSS to your global custom CSS.

.x-topbar {
    float: right;
}

Thanks!

1 Like
#7

yes almost did it ! Last thing.

  1. How to change the order so the social media is under the words?
  2. How to get the font bigger size?

Thanks a lot !!

#8

Hi there,

Please add this javascript too just under the javascript provided above.

jQuery('.p-info').insertAfter('.p-info + div');

Then add this CSS for changing the font size.

.x-topbar .p-info a {
    font-size: 15px;
}

Thanks!

1 Like
#9

Thank you guys!! you are the best

#10

Hi @Amazone,

Happy to hear that.

Feel free to ask us again.

Thanks.

#11

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.