Wordpress Themes - WP Forum at BFA

Wordpress Themes - WP Forum at BFA (http://forum.bytesforall.com/index.php)
-   Montezuma Theme (http://forum.bytesforall.com/forumdisplay.php?f=53)
-   -   [SOLVED] Page Menu Size (http://forum.bytesforall.com/showthread.php?t=20984)

SigWS Oct 8, 2013 10:43 AM
[SOLVED] Page Menu Size
 
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 Oct 8, 2013 01: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 Oct 8, 2013 02:17 PM
Quote:
Originally Posted by juggledad (Post 104070)
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):
http://cruciblegaming.com/goodies/example.png

juggledad Oct 8, 2013 04: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 Oct 8, 2013 05:28 PM
Quote:
Originally Posted by juggledad (Post 104072)
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 Oct 8, 2013 06: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 Oct 8, 2013 07:07 PM
Well. I give up.

Thanks for trying. :o

juggledad Oct 9, 2013 03:41 AM
did you look at the <i> under the <a> that is under the <li>?

SigWS Oct 9, 2013 09: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 Oct 9, 2013 12: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 Oct 9, 2013 02:08 PM
Alternatively you could use
HTML Code:
#menu1 li i {
    display: none !important;
}
to hide the <i>

SigWS Oct 9, 2013 03:55 PM
Quote:
Originally Posted by juggledad (Post 104095)
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 (Post 104098)
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!


All times are GMT -6. The time now is 05:22 PM.

Powered by vBulletin® Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.