TOP Widget overlapping with Navigation bar

Support
#1

Hi X,

My top widget button is overlapping with navigation bar, i need my widget on right align with navigation bar without lapping with menu item.
In image their is a menu item behind the " Start a project " widget , i need widget on same location but dont want it to overlap with menu.

And also i need “close” or “X” on widget when it collaps, so user can easily close it.
www.dezinar.com

#2

This is an automated message to notify you that your thread was posted in the wrong forum, and it has been moved to the correct place. A member of our team will be happy to reply just as soon as your thread is up. How support works.

For support, please post all questions in the Support Forum.

For peer to peer conversations with other Themeco customers about tips, customizations, or suggestions you are welcome to use the Conversation Forum (no official support provided here).

Design & Development, Marketing & Media, and Hosting & Optimization are for discussion with fellow Apex members about non Themeco related topics. Please keep this in mind in the future.

Thank-you!

#3

Hello There,

Thanks for writing in! Do you want something like this?

If that is the case, please add the following CSS code in the X > Launch > Theme Options > Global CSS (http://prntscr.com/evui3r)

.x-navbar .x-container.max.width {
    padding-right: 170px;
}

You cannot add a close or x button because the “start a project” is the toggle button where you can close or open that widget area.

Hope this helps. Please let us know how it goes.

#4

Hi X,

its possible please have a look on below code thats working for me :slight_smile:
.x-btn-widgetbar .x-icon-plus-circle:before {
content: " CLOSE ";
border-color: transparent;
text-align: center;

}
.x-btn-widgetbar.collapsed .x-icon-plus-circle:before {
content: " START A PROJECT";
text-align: center;
}

#5

Hi X,

The above code works perfectly but i need the same for Top bar when we view on mobile version and also i need space above the first menu item " Website Design" in mobile view.

#6

Hello @capitald123,

Please add following CSS in Theme Options CSS panel:

p.p-info a:nth-child(2) {
    padding-right: 110px !important;
}

p.p-info a:nth-child(1) {
    margin-right: 0px !important;
}

@media only screen and (max-width: 900px) {
  .x-navbar .x-nav {
    margin-top: 60px !important;
}
}

The outcome would look something like this for top bar and navigation menu. Please let us know know your feedback.

Thanks.

#7

No words… Awesome and last thing Prasant … i want to make both topbar and widget sticky like navigation menu and info vertically center.

Thanks alot for helping me.

#8

Hi there,

Thanks for writing in! Regretfully this isn’t a feature offered by X. It could be possible with custom development, but this would be outside the scope of support we can offer. You may wish to consult a developer to assist you with this. X is quite extensible with child themes, so there are plenty of possibilities.

Thanks for understanding. Take care!