primary menu

Greetings….for font sizes etc., you can find the “Typography Options” tab in the customizer of the theme. Go to Appearance >> Customize >> Typography Options

If you need to change the font family or whether it’s in uppercase or not, you will need to do some custom CSS for that by using one of the following methods:

1. Plugin like “Simple Custom CSS”
2. If you use Jetpack, then you can use its Custom CSS feature
3. If you are using a child theme, you can do it directly in the style.css

To change the font family of the menu, the default styling is:

.main-navigation {
    font-size: 0.813rem;
    font-weight: 400;
    text-transform: uppercase;
}

You can override the text transformation by doing this:

.main-navigation {
    text-transform: uppercase;
}

If you have other styling you want to do that the theme options doesn’t include, you can add them to that code above, including font-family.

Regarding changing the width of the menu, are you referring to the side column width? If so, this requires a bit more custom CSS to change, but let me know and I can point you in the right direction of what code to modify.

Hi Alan,

To adjust the side column with, we also need to make a margin adjustment as well for the main content area as well. This is something I just implemented on the pro version of Morphology which you can apply to your needs here as custom CSS.

@media (min-width: 48em) {
	#landing-half-left,
	.sidebar {
		width: 30%;
	}
	.site-content {
		margin-left: 30%;
	}
}

@media (min-width: 68em) {	
	.sidebar {		
		width: 18%;
	}
	.site-content {
		margin-left:18%;
	}		
}

Because it appears you are not using a child theme, or Jetpack, the next option to add custom CSS is to use a plugin like “Simple Custom CSS”. You can then copy and paste the above code into your new custom stylesheet.

UPDATE: If you need to adjust the width and margin to be different, you can do so.

• This reply was modified 9 years, 8 months ago by Shaped Pixels.
• This reply was modified 9 years, 8 months ago by Shaped Pixels.

First, you are OK with the width that you set?

So not you want the “menu” to have larger menu links?

Not centered and not capitalized…you can do this:

.main-navigation {
    text-transform: none;
    text-align: left;
}

Can I get you to set your side column width to what you want, then reply back here and I will check it out. Also, make sure the CSS I gave you to make it align left and normal case text is also in place.

Perhaps I’m misunderstanding something here…. you wanted to adjust the width of the side column correct?

I pasted this code:

@media (min-width: 48em) {
   .sidebar {
   width: 30%;
}
.site-content {
   margin-left: 30%;
}
}

@media (min-width: 68em) {	
   .sidebar {		
   width: 18%;
}
   .site-content {
   margin-left:18%;
}		
}

Where did you put that code because I do not see it anywhere?

Then, you wanted to change the menu links to be left aligned and just normal case, not uppercase. I pasted this code:

.main-navigation {
    text-transform: none;
    text-align: left;
}

That I see in your custom stylesheet and on my end, is working. I see it aligned left and in normal case.

In your custom stylesheet, it should look like this:

@media (min-width: 48em) {
   .sidebar {
   width: 30%;
}
.site-content {
   margin-left: 30%;
 }
}

@media (min-width: 68em) {	
   .sidebar {		
   width: 18%;
}
   .site-content {
   margin-left:18%;
 }		
}

.main-navigation {
    text-transform: none;
    text-align: left;
}

Did I misunderstand what you are wanting to do?

• This reply was modified 9 years, 8 months ago by Shaped Pixels.
• This reply was modified 9 years, 8 months ago by Shaped Pixels.

The part I don’t understand is this part what you said:

…then I pressed update custom css….ok done
then I removed the content and pasted…

You deleted the first code part after saving it, then put in the last code part?
If so, why did you delete the first code and not keep both sets of code?

NOTE: When you paste code into the wordpress forums here, it’s best to highlight all the code, then on the editor, click on the “Code” button. This puts the code in a special block section so it doesn’t affect the WordPress page layout. So for example, the complete code that you need to add to your custom stylesheet looks like this in that “Code” block with the grey background.

@media (min-width: 48em) {
   .sidebar {
   width: 30%;
}
.site-content {
   margin-left: 30%;
 }
}

@media (min-width: 68em) {	
   .sidebar {		
   width: 18%;
}
   .site-content {
   margin-left:18%;
 }		
}

.main-navigation {
    text-transform: none;
    text-align: left;
}

• This reply was modified 9 years, 8 months ago by Shaped Pixels.

There are many ways to do custom CSS:

1. Child theme – using its own style.css file
2. Jetpack – if you use this, it has its own Custom CSS feature
3. Plugin – I usually recommend Simple Custom CSS

Any of the methods above can be used to add your own custom CSS. These should overide the theme’s own styles. Also depends on the positioning of the css files in the source code and how they load. CSS that comes after another one will override the previous one (hence the term cascading stylesheets). So the old or previous code gets ignored for the newer one.

You said you cannot get the menu width smaller than 20%. Also, when you say menu width, I am assuming you are referring to the side column width? I need to make sure this is what you are referring to? The menu itself does not have a width applied to it, but the left side column does.

What width were you wanting instead of 20%? Remember, you can also use pixels instead of % if you wish. Percentage width will be of whatever the browser window is, so that means the width will adjust itself based on the window size.

As for content width, this will max out at 1165 pixels on full width pages. The overall site container is designed to fill the full width of the browser window…on all resolutions, even the really wide ones.

UPDATE:
When you said that you were able to change the width of your main content, but you still have a lot of empty white space to the right of it. I am beginning to think that you are actually wanting to make the overall width of the page (left column and main content column) to be less width and not extend 100% from the left to right of the browser window, but to have a boxed layout instead.

If you need the overall page width to be less width, this won’t really be possible due to the design of this theme. If this is the case, then Morphology Lite won’t be the right theme for you then.