Widgetbar and nav bar interplay

[KimAnn]

Hello-

I followed this awesome thread to create a more useful widgetbar on our site:

Using text instead of FontAwesome Icon in WidgetBar?

Hi Mark, To achieve that, you can add this in Theme Options > CSS .x-btn-widgetbar .x-icon-plus-circle:before { content:"Forms"; } .x-btn-widgetbar .x-icon-plus-circle { position: static; top: 0; right: 0; padding: 5px 20px; background-color: #000; color: #fff; } .x-btn-widgetbar i:hover { background-color: red; } .x-btn-widgetbar { border:0; } Hope that helps

Here is our site:
http://devv.rayrolando.com/

The problem is, as the screen gets smaller the widgetbar moves on top of the nav bar. Is there a way to make this widgetbar not move over top the nav bar?

Here’s a screenshot of what we don’t want:

[ruenel]

Hello Kim,

Thanks for writing in!

The widget bar toggle is positioned on the top right of the page. To avoid it from obstructing the other elements in your page, you can move it down to at least 100 pixels.

I can see that you have added these custom css:

.x-btn-widgetbar .x-icon-plus-circle:before{
    content:"Member Login";
}
.x-btn-widgetbar .x-icon-plus-circle{
    position:static;
    font-size:18px;
    top:0;
    right:0;
    padding:10px 20px;
    background:rgb(140,104,164);
    background:linear-gradient(90deg,rgba(140,104,164,1) 0%,rgba(109,84,142,1) 41%,rgba(71,68,111,1) 84%);
    color:#fff;
}
.x-btn-widgetbar i:hover{
    background-color:#d2b493;
}
.x-btn-widgetbar{
    border:0;
}

Moving the toggle down would mean that you add css top property, “top: 100px;”, to the widgetbar class.

.x-btn-widgetbar{
    border:0;
    top: 100px;
}

Hope this helps.