This topic has 4 replies, 2 voices, and was last updated 9 years by Mj.

  • Author
  • #30945
     Mj
    Participant

    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?

    #30948
     sharmstr
    Moderator

    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

    #31072
     Mj
    Participant

    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;
    }
    
    #31074
     sharmstr
    Moderator

    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

    #31173
     Mj
    Participant

    I sent you an email 🙂

Viewing 5 posts - 1 through 5 (of 5 total)

The forum ‘KLEO’ is closed to new topics and replies.

Log in with your credentials

Forgot your details?