Solved Dropdown list centred text

Discussion in 'All Other Widgets' started by meadena, Apr 5, 2016.

  1. meadena

    meadena Member

    13
    0
    Hello.....does anybody know if there's a way of centering the text in the dropdown list boxes widget? At present they are always ranged left.

    Thanks!

    Andy
     
  2. Norman Durkee

    Norman Durkee Well-Known Member Moderator

    269
    45
    Hey @meadena , there is no way from within the widget itself to center the text, however with some CSS I was able to center it. However you must use a custom open button or else the hamburger menu will also be centered. You can see an example below that I put together and If that is what your in search of then I can help you with the CSS necessary to achieve this.

    http://dropdowncenteralign.businesscatalyst.com/
     
  3. meadena

    meadena Member

    13
    0
    Hi Norman, thanks for your quick reply. Your example looks exactly what I need....however, I'm not very good with CSS I'm afraid....if there's any tips you can share regarding this widget and how CSS will create the centered text, that would be much appreciated.

    Thanks in advance....

    Andy
     
  4. Norman Durkee

    Norman Durkee Well-Known Member Moderator

    269
    45
    Absolutely, can you just send me over a link to page (or temporary page) and I can get that CSS code for you.
     
  5. meadena

    meadena Member

    13
    0

    That's very kind of you Norman....it's currently a temporary site that I'm building, that's in a sub folder of my own site, so that the client can view the site before going live. The drop down menu is only on the mobile version, and the link is here:

    http://www.meadencreative.com/equineconstruction/phone/services.html#top

    Does that help?

    Regards

    Andy
     
  6. Norman Durkee

    Norman Durkee Well-Known Member Moderator

    269
    45
    Hey Meadena the only menu that I am seeing is the hamburger menu and that already is center aligned, is there another menu I am missing?
     
  7. meadena

    meadena Member

    13
    0

    Hi Norman, sorry, if you go a little way down you will see a red box called 'Jump to…'. The text on that box is centred, but if you click it, you will see 4 further links on that page. The text on these links are ranged left....this is the text that I'm wanting to be centered.

    Thanks again for your time....much appreciated.

    Andy
     
  8. Norman Durkee

    Norman Durkee Well-Known Member Moderator

    269
    45
    I see now, okay so if you can go to the page in Muse and then select Object>Insert Html and then paste this code, please let me know if that fixes that for you!
    Code:
    <style>
    
    .compactmenu-u10542.theme-default ul a {
        text-align: center;
    }
    
    </style>
     
    meadena likes this.
  9. meadena

    meadena Member

    13
    0

    You're a genius Norman! Worked a treat! many many thanks for that.....:)
     
  10. meadena

    meadena Member

    13
    0
  11. Norman Durkee

    Norman Durkee Well-Known Member Moderator

    269
    45
    No worries at all! Yes so sense that menu is on a separate page it will need a new code, add this code to that page and you should be good to go! However if you run into anymore issues please let me know :)
    Code:
    <style>
    
    .compactmenu-u11433.theme-default ul a {
        text-align: center;
    }
    
    </style>
     
  12. meadena

    meadena Member

    13
    0

    Absolute star!! Thanks so much.....worked a treat.

    Andy
     
  13. Norman Durkee

    Norman Durkee Well-Known Member Moderator

    269
    45
    Awesome im glad to hear that!!
     

Share This Page