Make menus bigger in Wu Wei

  • Author
    Posts
  • #1133998

    horbart
    Member

    Hi,

    I would like the top menus to slightly larger in Wu Wei. Is there a way to do this in CSS?

    – I also want to get rid of the comment-boxes completely.. any ideas?
    ( I have done all the prescribed stuff that´s advised through support; the comment-function is disabled, but the actual boxes remains…)

    Cheers,
    Henrik

    The blog I need help with is henrikskram.com.

    #1134169

    squarepixel
    Member

    In order to change the menu size by CSS, you could do something like this:

    .menu-main {
    font-size: 1.5em;
    }
    .menu-main a {
    padding-bottom: 20px;
    }

    And fine-tune the size and padding values to your liking.

    About the comment-boxes – I don’t see any on your site. Do you want to hide them from your editing interface? That would be the little “Screen Options” tab on top right, which lets you untick “Discussion” and “Comments”.

    #1134175

    horbart
    Member

    Great, thanks alot! Very helpful.

    Another one for you;

    – is there a way to fix the menus on the top of the page, so that when you scroll down they remain on top?

    h

    #1134181

    squarepixel
    Member

    That’s a bit more tricky, as the markup of your theme isn’t prepared for this. Also, we need to take into account the space taken by the WordPress admin bar.

    But here is a quick fix you can try:

    .full-column {
        position: fixed;
        top: 0;
        width: 100%;
        background: white;
    }
    #header {
        margin-top: 4em;
    }
    .admin-bar .full-column {
        top: 28px;
    }
    .admin-bar #header {
        margin-top: 4.5em;
    }
    #1134182

    horbart
    Member

    Excellent, works really well!

    Thanks.

    If I, at a later stage, want to go back to default, what´s the procedure?

    H

    #1134183

    squarepixel
    Member

    That would be easy, you could just remove those pieces of code from your custom CSS Editor field.

    Or if you want to keep it for future reference, you can make it inactive by placing it between comment markers, like this:


    /*
    a comment, this code won't do anything now
    */

    #1134204

    ruthmmciver
    Member

    I would like to space out my menu topics evenly using the wu wei theme,
    i have 5 topics on one line, then it knocks the final heading ‘blog’ onto the next line. Any idea of how I can make all headings on the one menu / line?

    #1134209

    Comments are stripped out by the CSS Tidy software used here at WordPress.com to keep file sizes as small as possible and to make sure it doesn’t have any errors and so it loads faster.

    CSS works differently here at WordPress.com. You are not editing the original CSS, you are overriding it. You have to create a rule to reverse or override the original parts of the CSS you want to deactivate.

    #1134210

    timethief
    Member

    @thesacredpath
    Alleluia! It’s so good to see you here.
    I missed you BIGTIME.

    #1134211

    @ruthmmciver, it is difficult to evenly space the menu out over the width. You can do it, but if someone views your site with a smaller width screen, it can mean that the menu items will go to a second line, as is happening with yours. Also, each browser renders differently, so one browser may be fine and another will show two lines.

    You can adjust the space to the right of the menu items by changing the value of the right margin. Add the following to the bottom of your custom CSS and then adjust the 1.819em value as desired.

    .menu-main a {
    margin-right: 1.819em;
    }
    #1134212

    @timethief, hope you are doing well. I’m quite busy at the moment with getting settled, but will probably be around the forums more than I have been.

    #1134213

    timethief
    Member

    @thesacredpath
    I did a ♫happy dance♫ when I saw your username on the board.
    I know you are busy getting settled. I would love to receive an email whenever you have the time to update me on your adventures.

    #1134214

    squarepixel
    Member

    @thesacredpath : thanks for enlightening me regarding the treatment of comments in CSS, I wasn’t aware of that!

    @ruthmmciver : another thing you can do, to reduce even more drastically the spacing of the menus, is to reduce the width parameter to a lower em value:

    .menu-main a {<br />
        width: 9.08em;<br />
    }

    Actually, to make it really tight, you can even replace that value with width: auto; and adjust the space using the margin-right value, as tesacredpath suggested.

    #1134218

    You are welcome.

    #1134268

    Comments are stripped out by the CSS Tidy software used here at WordPress.com to keep file sizes as small as possible and to make sure it doesn’t have any errors and so it loads faster.

    We’ve updated! Comments can now be added using the WordPress.com CSS Editor. :)

The topic ‘Make menus bigger in Wu Wei’ is closed to new replies.