Top bar allignment

Hey,
1. You can use this css to expand your search bar:

@media (min-width: 992px) {
#topbar-search input[type=text] {
    min-width: 500px;
}
.col-md-6.col-sm-6.kad-topbar-right {
    width: 50%;
}
.col-md-6.col-sm-6.kad-topbar-left {
    width: 50%;
}
#topbar-search .search-icon {
    float: left;
}
}

2. I would recommend removing your logo from the header with css like this:

#logo {
    display: none;
}

And then adding it as an image to your topbar widget area. You will need some css to get the logo and category search styled as you want. I would be happy to help with that.

Hope that’s helpful!

Hannah

Thanks Hannah
I have put both the css and put the logo in topbar widget, it looks little messy can you please take a look, also primary menu seems to be hiding (only 2 item showing)

Thanks

Where are you wanting the category search to align?
You can use this css to add some padding to your menu:

#nav-main ul.sf-menu, .nav-main ul.sf-menu {
    padding-top: 50px;
}

Hannah

I need category right below the logo text line some thing like This. also the search icon (lens) to be on right side and covered in a colored box again some thing like This.

Thanks

This will move the select:

.widget-last.topbar-widgetcontent {
    float: left;
    display: block;
    clear: left;
}

This will edit the search, add to the end of your css because I had to override a lot of css you had added that wasn’t correct:

#kad-banner #topbar-search .search-icon {
    position: absolute;
    right: 0;
    left: auto;
    top: 0;
    bottom: auto;
    margin-top: 0;
    height: 39px;
    background: orange;
    padding: 5px 10px;
}
#kad-banner .kad-topbar-right #topbar-search .form-search {
    max-width: 400px;
    position: relative;
}
#kad-banner #topbar-search input[type=text] {
    min-width: auto;
    padding: 5px 35px 5px 10px;
}
@media (min-width: 992px) {
    #kad-banner .kad-topbar-right {
        width:70%;
    }
    #kad-banner .kad-topbar-left {
        width:30%;
    }
}

Thanks, every thing looks almost perfect now, but I cant change primary/secondary menu font size now, checked with all plugins disabled, I am changing in theme option > menu setting > primary menu font.

I also tried this css but it did not help, please advise.
Thanks Much.

#nav-main {
font-size: 14px;
}

• This reply was modified 7 years, 1 month ago by bsatsangi.

What are your menu font sizes currently set to from Appearance > Theme Options > Menu Settings? Have you tried clearing your cache after adjusting this setting?

Hannah

it was 12, i have just now changed to 8 for both menu primary and secondary it made no difference, yes i cleared cache also disabled all plugins but it made no difference. please advise

Thanks

• This reply was modified 7 years, 1 month ago by bsatsangi.
• This reply was modified 7 years, 1 month ago by bsatsangi.

I’m seeing this in your css:

span {
    font-size: 16px;
    font-weight: 600;
}

Are you adding that?

Hannah

i don’t see this css in Theme option > advance setting. am i checking at the correct place or you meant some where else ?

below are the all css i have.

#nav-main {
overflow: visible;
}
#nav-second {
overflow: visible;
}
.kad-topbar-right #topbar-search .form-search {
float: right;
}
#topbar-search input[type=text] {
height: 39px;
}
div#s2id_autogen1 {
margin-top: 4px;
}
#topbar .select2-container .select2-choice {
color: #fff !important;
border-color: rgba(0,0,0,.05);
}
.topclass .select2-container {
background: rgba(255,255,255,.2);
}
.topclass .select2-container .select2-choice .select2-arrow b:after {
border-top-color: #fff;
}
.widget-2.topbar-widgetcontent {
float: left;
}
#topbar {
position: fixed;
width: 100%;
top: 0;
z-index: 999;
}
.admin-bar #topbar {
top:28px;
}
.headerclass {
margin-top: 30px;
}
@media (max-width: 767px){
.home .home-iconmenu {
width:50%;
float:left;
}
.homeitemcount3{
clear:left
}
}
@media (min-width: 767px) {
.form-search {
width: 60%
}

.kad-topbar-left {
width: 30%;
}
.kad-topbar-right {
width: 70%;
}
}
.kad-topbar-right {
width: 70%;
}
@media (min-width: 992px) {
.form-search .search-icon {
float: right;
position: relative;
margin-top: -33px;
}
}
.woocommerce-result-count {
display: none;
}
@media (max-width: 992px) {
.sliderclass.home_sliderclass {
display: none;
}
}
div#s2id_autogen1 {
background: #577DA0;
}
#topbar span#select2-chosen-2 {
color: #FFFFFF;
}
#topbar .select2-container–default .select2-selection–single {
background-color: #577DA0;
}
#topbar .select2-container–default .select2-selection–single .select2-selection__rendered {
color: #fff;
}
#topbar .select2-container–default .select2-selection–single .select2-selection__arrow b {
border-color: #fff transparent transparent transparent;
}

It looks like it’s been added to your style.css in your child theme. Do you see it there? Also, it looks like you’re using virtue premium. You can access premium support here: https://www.kadencethemes.com/support-forums/forum/virtue-theme/

Hannah

Thanks Hannah, Every thing looks perfect now,
appreciate your help.

This thread stand closed.

Glad to hear it!

Hannah