Can't nail this menu. Please Help

  • Hey all.
    new to wordpress, haven’t built a website since Dreamweaver 2!

    bit of n00b, but please help, i’m gradually getting my head around this.

    I cannot for the life of me work out this menu.

    I’d like to unbold the text, center the text (i realise this could be tricky…), change the background colour of the menu area and make the whole menue not quite as high.

    Here’s the menu css

    /* --------- */
/* -- Nav -- */
/* --------- */
#nav { float: left; margin: 30px -15px 0 0; border-top: 0px #eee solid; border-bottom: 0px #eee solid; width: 100%; }
.menu li { padding: 11px 0 10px 0; float: left; position: relative; }
.menu a { display: block; padding:  10px 35px 8px 0; margin: 0; color: #FFF; text-decoration: none; font-size: 18px; text-transform: uppercase; }
.menu .current a, .menu li:hover > a { color: #cccccc; }
.menu ul { background: #eee; display: none; margin: 0; padding: 0; width: 260px; position: absolute; top: 42px; left: 0px; border: solid 1px #ddd; }
.menu ul li { float: none; margin: 0; padding: 0; }
.menu ul li:hover a, .menu li:hover li a { color: #555; }
.menu ul a:hover { background: #333333 !important; color: #fff !important; }
.menu li:hover > ul { display: block; }
.menu ul a { font-size: 16px; padding-left: 10px; text-transform: none; font-weight: normal; }
.menu ul ul { left: 250px; top: -3px; }
.menu li.current_page_item a { color: #fff; }
.menu .sub-menu li.current_page_item a { color: #cccccc; }

    and here’s the page in its current, most basic state. https://thematadormusic.com/home

    thanks. ??

Viewing 4 replies - 1 through 4 (of 4 total)

  • .menu ul a { font-size: 16px; padding-left: 10px; text-transform: none; font-weight: normal; }

    use the font-weight to .menu ul li a{font-weight:normal; text-align:center;}

    .menu{background-color:#CCC;}

    Hello,

    The text in your menu isn’t actually bold right now. But it is in all caps, which can be changed by removing the text-transform:uppercase; from the .menu a element.

    I don’t know if you can center the menu very simply, but you can add margin-left: 23px; and margin-right:-13px; to the .menu li element, and that puts it roughly centered.

    The background color can be changed by changing the background-color:#cccccc in the #nav element. For some reason the background color code wasn’t included in your code you posted here, but it is in your CSS.

    The position of the menu itself can be raised by changing the 30px in the margin: 30px -15px 0 0; code in the #nav element.

    Good luck with everything.

    PS – I think you’re required to warn people that there are any questionable images on your site when you link to it.

    PPS – When posting code into a post, make sure to highlight the code and then click the “code” button at the top of the comment box. That will put in the code format, otherwise you code will get deleted by administrators.

    Thread Starter deathmoth

    (@deathmoth)

    thanks for your help mate. i’ll give it all a go.

    sorry about the n00bing of my post and sorry for the penis drawing. its just a mockup image to get the dimensions ??

    Thread Starter deathmoth

    (@deathmoth)

    a couple of things i’d like to clear up.

    re: how high the menu is, i meant, the height of the menu. i assume the menu is a box, i want to make that box not as high/tall/whatever.

    and re: centering. I meant am i able to center the text within the menu. obviously the menu is already centered.

    thanks again

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Can't nail this menu. Please Help’ is closed to new replies.