[SOLVED] Page Menu Size

SigWS · #1 Oct 8, 2013, 11:43 AM

I want to change the height of the menus underneath my header (cruciblegaming.com)

as far as I can tell I need to change:
li.page size, but I can't find it. Can it just be inserted in various? Or is something else creating this tag I am seeing with Chrome>Inspect Element?

Edit: to clarify, I want to reduce the distance from the top of the words in the menu to the underside of the header text.

juggledad · #2 Oct 8, 2013, 02:44 PM

play with this code

HTML Code:

/* Global link style */
#menu1 a, 
#menu1-smooth a { 
	font-family: 			'Yanone Kaffeesatz', sans-serif;
	font-size: 				22px; 
	font-weight: 			300;
	color: 					#000; 
	padding: 				12px 15px 20px 15px; 
	line-height: 			22px;
}

in menus_menu1.css

SigWS · #3 Oct 8, 2013, 03:17 PM

Quote:

Originally Posted by juggledad

play with this code

HTML Code:

/* Global link style */
#menu1 a, 
#menu1-smooth a { 
	font-family: 			'Yanone Kaffeesatz', sans-serif;
	font-size: 				22px; 
	font-weight: 			300;
	color: 					#000; 
	padding: 				12px 15px 20px 15px; 
	line-height: 			22px;
}

in menus_menu1.css

I've been all over that and I seem to get it trimmed down some but no matter what I do I can't get the white space to go away. Basically I want the orange bar that appears on hover over to just sit a pixel or two above the letters in the menu.

What is really odd about it, is when I am logged into my admin account, for a fraction of a second on page load it displays EXACTLY how I want it, then as soon as the wordpress menu bar across the top pops in, it moves to the position that it appears when when I am not logged in/checking from other browsers.

Example (what I am trying to achieve shown below by way of editing a screen shot):

juggledad · #4 Oct 8, 2013, 05:34 PM

try plaing with the line height in

HTML Code:

#menu1 a, #menu1-smooth a {
    color: #000000;
    font-family: 'Caudex',sans-serif;
    font-size: 22px;
    font-weight: 300;
    line-height: 32px;
}

SigWS · #5 Oct 8, 2013, 06:28 PM

Quote:

Originally Posted by juggledad

try plaing with the line height in

HTML Code:

#menu1 a, #menu1-smooth a {
    color: #000000;
    font-family: 'Caudex',sans-serif;
    font-size: 22px;
    font-weight: 300;
    line-height: 32px;
}

I was messing with that too, it seems to take the height from the bottom, underneath the menu text (reduces the distance between the menu text and the top of the breadcrumb div)

juggledad · #6 Oct 8, 2013, 07:35 PM

you have to keep digging. Go find this code

HTML Code:

#menu1 > li:hover, #menu1 > li.active, #menu1 > li.ancestor {
    border-top: 5px solid #D39300;
}

and cange it from 'border-top' to just 'border'.

Then in firebug go to the li and look at each child element andd the css associated with it and anthing that has a height change and see what it does. you should find it in a couple minutes.

SigWS · #7 Oct 8, 2013, 08:07 PM

Well. I give up.

Thanks for trying.

juggledad · #8 Oct 9, 2013, 04:41 AM

did you look at the <i> under the <a> that is under the <li>?

SigWS · #9 Oct 9, 2013, 10:23 AM

I've looked at/adjusted every thing in that sheet that I think would have made the adjustment I want.

I spent a good 2 hours trying to figure it out before I even posted here. I'm at the point now where I'll just live with it how it is.

Thanks for trying to guide me, but I'm missing something and after about 5 hours total playing with that sheet, I don't think it's going to jump out at me.

juggledad · #10 Oct 9, 2013, 01:06 PM

you need to change the height in

HTML Code:

#menu1 > li > a > i {
    display: block;
    height: 10px;
    margin: 0 auto 5px;
    width: 24px;
}

and the line height here

HTML Code:

.menu {
    line-height: 33px;
    list-style-type: none;
}

lmilesw · #11 Oct 9, 2013, 03:08 PM

Alternatively you could use

HTML Code:

#menu1 li i {
    display: none !important;
}

to hide the <i>

SigWS · #12 Oct 9, 2013, 04:55 PM

Quote:

Originally Posted by juggledad

you need to change the height in

HTML Code:

#menu1 > li > a > i {
    display: block;
    height: 10px;
    margin: 0 auto 5px;
    width: 24px;
}

and the line height here

HTML Code:

.menu {
    line-height: 33px;
    list-style-type: none;
}

Quote:

Originally Posted by lmilesw

Alternatively you could use

HTML Code:

#menu1 li i {
    display: none !important;
}

to hide the <i>

Playing with the line heights |+ lmilesw suggestion of hiding the i got me close enough to where I want to be. Thanks!