Suivant Main Nav titles

[jfazar]

Hello,

I just had the Suivant theme installed and I've just started adding my content and modifying it. When I started to add some items to the main navigation I noticed that the spacing around one of them is not right - it's being squished. I'm sure this must have come up already but I didn't notice anything while scanning this section. Thanks!

[Bruce - PhosphorMedia]

There is a width assignment in the CSS for these elements. @media only screen and (min-width: 960px)


.navigation-set .level-1 {

• font-size: 1rem;
• height: 3.375em;
• line-height: 3.375;
• text-transform: uppercase;
• width: 12%;

}

You change the width percentage, but don't exceed nn X number-of-items > 100. (The easiest way to do this is to just place an inline style sheet before the menu).

[jfazar]

Hi Bruce,

I'm playing around with this in Chrome Inspector and I'm not sure what to modify to even get it to work. I'm a novice when it comes to Miva (9 especially) and also CSS so I need a little more explanation. Are you saying I shouldn't modify the original css file but put an inline style in? If so then where do I put it so it's before the menu. Thanks.

[Bruce - PhosphorMedia]

We recommend creating your own style sheet, like imagescience.css, and list it AFTER all other style sheets. Then, to modify an existing style, copy that styles full set of rules, paste it into your CSS file, and modify that.

[jfazar]

So under Settings > User Interface > HEAD tag content I found all the style sheets. I highlighted where I think the style would go. Does this look like what you were thinking?

<mvt:if expr="'dev.' IN tolower(g.domain:name)">
<link href="../css/normalize.css" rel="stylesheet">
<link href="../css/base.css" rel="stylesheet">
<link href="../css/scaffolding.css" rel="stylesheet">
<link href="../css/typography.css" rel="stylesheet">
<link href="../css/buttons.css" rel="stylesheet">
<link href="../css/fonts.css" rel="stylesheet">
<link href="../css/forms.css" rel="stylesheet">
<link href="../css/tables.css" rel="stylesheet">
<link href="../css/colors.css" rel="stylesheet">
<link href="../css/slider.css" rel="stylesheet">
<link href="../css/magnific-popup.css" rel="stylesheet">
<link href="../css/helpers.css" rel="stylesheet">
<link href="../css/structure.css" rel="stylesheet">
<link href="../css/pages.css" rel="stylesheet">
<link href="../css/print.css" rel="stylesheet">

<link href="../css/imagescience.css" rel="stylesheet">

<mvt:else>
<link href="../css/css.php" rel="stylesheet">
</mvt:if>