Change Top Bar Widget Button To Text Instead Of + Icon

Support
#1

Hi,

Is it possible to change the + icon in the top right which opens the widget area to text instead of a + button? I would like it to say TABLE / HOTEL BOOKINGS.

Screenshot attached.

Additionally please can you let me know how to style the widget area?

Many Thanks,

Marc

#2

Hey Marc,

This is possible through custom CSS. Please try this code in X > Theme Options > CSS:

.x-btn-widgetbar i {
    display: none;
}

.x-btn-widgetbar:before {
    content: 'Table/Hotel Bookings';
    color: #fff;
    position: absolute;
    transform: rotate(47deg);
    top: -23px;
    right: -48px;}

.x-btn-widgetbar {
    border-top-width: 50px;
    border-left-width: 50px;
    border-bottom-width: 50px;
    border-right-width: 50px;
}

Kindly note that since this is a custom code that changes the default behavior/display of the theme, you will be responsible to maintain or update the code in case you require further changes or if the code stops working in future updates. If you are uncertain how to proceed, it would be best to get in touch with a developer.

There are several things you can do to style the widget area but mainly you will have to add some custom CSS to do it. I am not certain what changes you are trying to do to the widget area. If you can be more specific, we can provide some more suggestion how to do it.

Thank you.

#3

Amazing thank you!

Regarding the widget area - I would like to change the background colour of the widget area to #caa45d and the font colour of the headings to #0a2749.

Thanks,

Marc

#4

Sorry I forgot to ask, is it possible to make the Top Bar Sticky and also the widget button I was referring to previously?

Best,

Marc

#5

Hey Marc,

Please try these codes:

.x-widgetbar-inner {
    background-color: #caa45d;
}

.x-widgetbar-inner .h-widget {
    color: #0a2749;
    text-shadow: none;
}

Here are some related links for further reading:

As for making the topbar also sticky, it would involve a bit more customization.

Please refer from these threads: https://theme.co/apex/forum/search?q=sticky%20topbar

Hope this helps.

#6

Great thank you!

Lastly how do I make the top bar static on desktop and mobile?

Thanks again for your help!

#7

I have tried the following:

.x-topbar {
position:fixed;
width:100%;
}

which worked fine but the menu which is also fixed then hides behind the top bar. I think I need to offset the fixed menu bar by the height of the topbar but I am not sure how to achieve this?

Thanks,

Marc

#8

Hey Marc,

Please try this CSS as well:


.x-logobar {
    top: 46px;
}

.x-navbar.x-navbar-fixed-top {
    top: 46px;
}

Kindly note that since this is a custom code that changes the default behavior/display of the theme, you will be responsible to maintain or update the code in case you require further changes or if the code stops working in future updates. If you are uncertain how to proceed, it would be best to get in touch with a developer.

Hope this helps.

#9

Amazing thank you for your help!

Best,

Dex

#10

You’re most welcome, Dex.

#11

Sorry, think I spoke to soon! Works fin on the desktop site but on mobile the menu button is not visible when you scroll down.

#12

Hi Dex,

Please note that the custom codes that we have provided should help you get started with the customization you are trying to achieve. Since what you are trying to do does not have an option available out of the box, this falls into custom development which goes beyond the scope of our support as we are not able to accommodate every custom changes you want to do on the your website. If you are uncertain how to proceed, it would be best to get in touch with a developer.

Thank you.

#13

No problem, thanks for your help.

Best,

#14

You are most welcome. :slight_smile:

#15

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