Hello, Can someone tell me how to set the height of the main menu bar? I have tried setting it in the .main_dnnmenu_bar class, but nothing happens. I would also like the menu items to be centered vertically in the menu bar. Thanks for any help. Regards, Knut Erik

You need to set this in the skin, styling the element into which the menu is placed.

Joe, Thanks for replying. I don't quite understand what you mean by "setting this in the skin". Do you mean the .ascx file? In the .ascx file, I am able to identify the line where I believe the menu is defined, because it lists the various CSS classes which styles the menu. However, setting height="20", for example, after the "align" statement, has no effect. Sorry for asking these stupid questions, but I am new to skinning and this type of programming. Kind regards, Knut Erik

Sorry. I meant that you need to apply the style to the element that contains the menu.

You need to style this in the skin.css file. You need to identify the id or class that controls the height of your menu and then specify that in the CSS code in the skin.css file.

Lee, Thanks for your reply. By using the "Display ID & class details" from the Web developer toolbar in Firefox, it seem like the classes .Skingradient, .main_dnnmenu_bar and .main_dnnmenu_rootitem controls the menu. The first of these classes seemingly controls the area behind the menu. I thought the .main_dnnmenu_bar class should control the menu itself, but nothing happens when I add "width" or "height" statements. The third and last class controls menu font, background color etc, but not height or width. I need to set the height or width of the menu bar because I sometimes get a break in the menu when it stretches out. I would be grateful for any advice. Regards, Knut Erik

hello,

it's always a matter of ' playing' with the classes and IDs to find the element to adjust, if you can provide a URL, or attach your skin as a zip file to this forum post, then I can have a quick look, thanks,

Lee, It would be great if you could take a quick look. The URL is: http://kvina.niva.no/striver/. I would like to set the height of the main menu equal to the flags picture to the left, and the width equal to the logo above (fixed at 900px). It would also be nice to have the menu items centered vertically, but it's not that important. Is it possible to style individual elements by using the full ID instad of the general class name? Thanks again, Knut Erik

Hello,

I changed this line of code, removed height and added padding:

.main_dnnmenu_bar {
    cursor: pointer;
    cursor: hand;
padding: 1px 0;
    background-color: #999999; /*Transparent;*/

}

You will see it is slightly larger than the flags, but it maybe easier to increase the size of the flags to match

Yes you can specify individual IDs, use the Web Developers Toolbar, and menu / information / display element information
then with your mouse, navigate through the menu + click on the item you want to view the id of:

ie. this is for the partners menu item

#dnn_dnnNAV_ctldnnNAVt86
{
border: 2px solid red;
}

Lee, Thank you very much for looking at my webpage! This was very helpful. I can use padding to control the width of the menu as well, but the best alternative would be to set it to automatically stretch out to fit with the green/blue login area above, if this is possible. Regarding the individual ID's: When I copy your code for the "Partners" menu item into skins.css and play around with the setting, nothing happens. Do I have to specify individual ID's differently than general classes? Thanks again, Knut Erik

Hello,

When testing out these things I would recommend you use the web developers toolbar, we cover how to start toolbar in this tutorial:

I just checked the ID for the partners menu item and the code does work, try this one:

#dnn_dnnNAV_ctldnnNAVt86
{
border: 10px solid red;
}

IDs are specified just as above, if you use the web developer toolbar at I explained in the previous post, it will display the ID that you actually need to use.

For the width, double check your tables, you may be able to specify a width for the table cell holding the menu.

Thanks,

Lee, Your test code for the partners menu item works fine now. I don't know why it didn't work the last time. I use the web developers toolbar in Firefox to test these things. Unfortunately, Firefox sometimes displays the webpage differently than Internet Explorer. I think most users of my site uses IE, therefore I am adapting the skin settings to fit with this browser. Thanks for your help.

When you add code to your skin.css file, make sure you press CTRL+F5 to reload the page and reload the CSS code.

If the display is not correct in Firefox I would do some further investigation as that usually means there is something wrong in your code. Usually Firefox displays the code correctly and IE is the one you need to troubleshoot. Also, if it works in Firefox you will find it works in most of the other browsers without problems.

You may want to look at:
Troubleshooting DotNetNuke Skins