Welcome! To use this support forum, please Login or Join Today!

   

Height of Main Navigation Bar

{name}
Rank

Total Posts: 26

Joined 2011-06-19

PM

 

Hey..

1) I want to reduce the height of the main navigation bar..how do i go about doing that?

3) Also how do i set the font style on the main navigation to BOLD?

2) Is it possible for me to put images on the header and/or footer and link them to other pages?

{name}
Rank

Total Posts: 3

Joined 2011-05-09

PM

 

I wanted to do the same thing as you and here is what I had to do, hopefully it can get you by until Casey can respond and explain if there is a better way.

To change the nav bar height:
1. Edit the file “images/styleX/nav_bg.png” with an image editor.  For my site I cropped it down to 65 pixels high.
2. Edit dropdown.css and find /* No Captions */ (I assume you also want to get rid of the captions, if not these instructions will probably differ)
3. Change the 3 lines under No Captions to
#menu_wrap #menu ul ul {top: 29px;}
#menu_wrap #menu ul ul ul {top: 0;}
#menu_wrap #menu li a {line-height: 38px;}
4. You may need or want to tweak those 2 pixel values a bit but those worked for me with the 65 pixel high nav_bg image.
5. Edit your theme options and set Show Captions to false or no.
6. Optionally, edit styleX.css and change the top margin for h1, h2, and h3 to 0.  I wanted to do this to remove additional whitespace between the nav bar and content.

To make the font on the main navigation bold, find
#menu_wrap #menu li a {line-height: 38px;}
and change to
#menu_wrap #menu li a {line-height: 38px;font-weight: bold}

Not sure about images in the header or footer.

Hope that helps

{name}
RankRankRankRank

Total Posts: 3667

Joined 2011-04-27

PM

 

Thanks Drew, that’s pretty close. To sum it up:

In your wp-admin, go to Appearance → Editor and open styleX.css (whichever you have set as default e.g; style2.css), and find this line around line #396:

/* Menu Position */

#menu_wrap,#menu {
 background: url(./images/style1/nav_bg.png) repeat-x;
 height: 103px;
}

Change to:

/* Menu Position */

#menu_wrap,#menu {
 background: url(./images/style1/nav_bg.png) repeat-x;
 height: 42px;
 font-weight: bold;
}
#menu_wrap #menu ul ul {top: 32px;}
#menu_wrap #menu li a {line-height: 42px;}
#menu_wrap #menu li li a {font-weight: normal;}

This modification will make your navigation height 42px as well as make your top-level menu items bold.


As for your other question, yes you can add images in the footer by creating a widget in the bottom1,bottom2,bottom3,or bottom4 widget location (Appearance → Widgets). To insert additional images in the header, you might have to add them in header.php. If you can provide any additional info, I may be able to be of more help on this one.

 

{name}
Rank

Total Posts: 26

Joined 2011-06-19

PM

 

Thank you Drew for your help..

Casey, I did as instructed but i somehow managed to change the alignment of the navigation bar to the extreme left..how do i revert that?? and also the divider below the main menu seems to have disappeared..please help! 

Here is a link to my site http://indrashishghosh.com/

{name}
RankRankRankRank

Total Posts: 3667

Joined 2011-04-27

PM

 

Thanks for the link. That definitely helps.

This CSS should do the trick:

/* Menu Position */
 
#menu_wrap,#menu {
 background: url(./images/style4/nav_bg.png) repeat-x 0 bottom;
 height: 42px;
 font-weight: bold;
 padding-bottom: 26px;
}
#menu {width: 960px;margin: 0px auto;}
#menu_wrap #menu ul ul {top: 32px;}
#menu_wrap #menu li a {line-height: 42px;}
#menu_wrap #menu li li a {font-weight: normal;}

/* Menu Links */
{name}
Rank

Total Posts: 26

Joined 2011-06-19

PM

 

Thank you Casey..the issue has been resolved..