How to fix this sidebar issue

[Mj]

Hi!

I am experiencing a problem regarding the left sidebar. I created a sidebar custom menu with menu items. In the menu items, some custom texts has been added with the label class and float right. Example with full screen: https://db.tt/wF0mNyRI

Ok so far so good. Once I reduce the size of a screen (and also on mobile phones) – the text within the menu items is overriding each other, like this: https://db.tt/iJ2QxtUv

How am I able to solve this issue?

[sharmstr]

Its nearly impossible to figure out what’s going on without knowing how you coded it or the css you have applied to it. But to take a guess… you’ll have to adjust your media query to remove the float right when the screen size is smaller than a certain size. What happens if you remove float right when the screen is that small? Test it and if it looks okay, then you’ll have to account for that.

COPY CODE

@media (min-width: 768px) {
label {
float: right;
}
}

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

This support site is not about custom work. If you need custom development please contact cornel@seventhqueen.com

[Mj]

I understand. Let me tell you a little more the way I created this: I created a menu within WordPress and assigned this menu to the custom menu widget.

Example menu item code:

COPY CODE

Profile <span class="label label-warning view-your-menu">[mycred_my_rank show_title="1" show_logo="0"]</span>

The stylesheet for ‘view-your-menu’:

COPY CODE

.view-your-menu {
  float: right;
}

The following css has been assigned to the whole custom menu widget:

COPY CODE

#nav_menu-3, #nav_menu-2 {
 background-color: #ffffff; 
  border: 1px solid #dee0e0 !important;
  font-size: 100% !important;
  padding: 20px !important;
}

[sharmstr]

Did you try what I suggested?

COPY CODE

@media (min-width: 768px) {
.view-your-menu {
float: right;
}
}

email me an account that I can use to see what’s going on?

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

This support site is not about custom work. If you need custom development please contact cornel@seventhqueen.com

[Mj]

I sent you an email 🙂

[Author]

Posts