Sitefinity Navigation Box-Sizing
In Sitefinity if you use this css rule,
/* apply a natural box layout model to all elements */* -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; Hi Chad,
By default the box-sizing property is set to content-box. By changing it to border-box you actually set fixed width to the list elements. Which means that if you add paddings to the elements, they won't widen the list element (which is what happens when box-sizing is set to content-box), but will be subtracted from the width that is set to the element, and this way the actual content width will be decreased. Here is some additional information about the box-sizing property.
Regards,
Jen Peleva
the Telerik team
Hi Jen,
Thanks for you quick response. I realize that setting the box-sizing property to border-box causes padding to be subtracted from the width, that isn't a problem. The problem is when the Sitefinity Navigation control is set to use this style, the drop down menus continuously shrink each time you mouse over the heading to make them show up. I will attach two screen shots, one the first time I mouse over the control, and the second after I have caused it to open a few times. Notice how the background has shrunk way down in the second one.
Hi Chad,
I suppose this happens, because you're using the universal selector (*). It sets the styles to all elements, including the ones in our page editor, which control the look of the navigation. You probably have a page wrapper (a div that wraps the whole page). A far better approach would be to declare your box-sizing property to the elements inside the wrapper. This way you'll make sure that styles will get applied to the front-end only and won't affect Sitefinity page editor's styles. Something similar to a css reset should do the job:
#wrapper body, #wrapper div, #wrapper span,#wrapper h1, #wrapper h2, #wrapper h3, #wrapper h4, #wrapper h5, #wrapper h6, #wrapper p, #wrapper pre, #wrapper a, #wrapper dl, #wrapper dt, #wrapper dd, #wrapper ol, #wrapper ul, #wrapper li, #wrapper tr, #wrapper th, #wrapper td... -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; Hi Jen,
I am using the standard Menu Strip that comes with Sitefinity. I am on Sitefinity 5.0. All I want to change on it is the font and the height of it. I am editing it in the Advanced mode, but it does not seem to pick it up. For example, I have added 'Red' to the BackColor as a test, and it does not pick it up. Are those fields working at all? What would be the best way for me to chnage the font, and height of it without the need for templates and all the rest?
Many thanks,
Andrei
Hi Jen,
I am using the standard Menu Strip that comes with Sitefinity. I am on Sitefinity 5.0. All I want to change on it is the font and the height of it. I am editing it in the Advanced mode, but it does not seem to pick it up. For example, I have added 'Red' to the BackColor as a test, and it does not pick it up. Are those fields working at all? What would be the best way for me to chnage the font, and height of it without the need for templates and all the rest?
Many thanks,
Andrei
Hi Andrei,
The properties you're referring to are actually set to the div that wraps the navigation, not to the navigation items. To change the height and font of the items you can either override the their default font and height, set by the Sitefinity skin, or simply create your own skin and declare these css properties in it. Take a look at this forum post for further reference.
All the best,