Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Trying to center menu

  • This topic is empty.
Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #188959
    Silveroo
    Participant

    In regards to http://wisecanadianmoney.com/testwp/

    1. I want to center ALL elements of the menu horizontaly. (test, exam, hello, apple)
    2. Make these elements have: bold and font-size:18px

    How is this accomplished? Tried all sorts of things, pulling my hair out…

    .html_header_top.html_logo_center .logo {
    left: 50%;
    -webkit-transform: translate(-50%, 0);
    -moz-transform: translate(-50%, 0);
    -ms-transform: translate(-50%, 0);
    transform: translate(-50%, 0); }

    thank you!!
    Silveroo

    #188962
    shaneisme
    Participant

    Have you taken a look at devtools in your browser?

    You’ll find out all sorts of information there. (including that this is a messy theme!)

    I’m not sure what the CSS is that you put in your post, it doesn’t seem to have anything to do with your menu.

    First of all, the actual menu is ul#avia-menu.menu.av-main-nav. The menu items that you listed [test, exam, hello, apple] are actually siblings of the search button as well. Those are all set to float: left, while the search button is set to float: right. That’s the first part of your problem… if you follow so far, you should be able to dig in and fix it up.

    If not… for this theme, did it come with this menu, or is this menu a widget? Are there options inside the WP admin to modify it?

    #188982
    Silveroo
    Participant

    thanks shaneisme,
    I follow you, but I couldn’t find a float:middle in devtools? how should I go about this?

    #188986
    Paulie_D
    Member

    There is no such property as float:middle.

    #188988
    Paulie_D
    Member

    You can do this

    
    .html_header_top.html_bottom_nav_header .main_menu>div, .html_header_top.html_bottom_nav_header .main_menu ul:first-child {
    width: 100%;
    height: 35px;
    text-align: center; /* will center INLINE-BLOCK list items */
    }

    INLINE-BLOCK THE li

    
    .av-main-nav li {
    /* float: left; <em>/ /</em> remove this <em>/
    position: relative;
    z-index: 20;
    display: inline-block; /</em> here */
    }
    

    Note this will cause your search icon/box to displace because it has float:right.

    If you remove that it will center with the rest.

    #188992
    Silveroo
    Participant

    thank you Paulie,
    I tried your code and unfortunately it didn’t work. I couldn’t tell you why though :)
    I left the code as is on my page, if you could kindly see how it behaves at http://wisecanadianmoney.com/testwp/

    I’m fine with the search field being on the right, actually I might take it out alltogether.
    What’s most important is the center alignment of the links in the main menu.

    best regards
    Silveroo

    #189001
    Paulie_D
    Member

    I tried your code and unfortunately it didn’t work. I couldn’t tell you why though

    Me neither unless it’s a caching issue….I adjusted those properties on the page, in browser, using the usual developer tools and it worked fine.

Viewing 7 posts - 1 through 7 (of 7 total)
  • You must be logged in to reply to this topic.