Modularity lite menubar -size,colour and place

kpuro · Member · Jan 31, 2012 at 1:39 pm
Copy link

Add topic to favorites
Hi,

I have just starting to learn the CSS and got the custom design. Now I’m wondering how it would be possible to:

1. Move the menubar below the slideshow?
2. Grow the size of the menubar (also the font size)
3. Change the colour of the menu bar (also the colour of the menu dropdown)
4. Change the font style and font colour in the menubar

Not even sure if these are possible..?

Thanks for the help!

Kirsti

The blog I need help with is: (visible only to logged in users)
kpuro · Member · Jan 31, 2012 at 5:44 pm
Copy link
Just figured out how to change the font size and backgroud color for the menubar. But still can’t get the menubar to move down or figure out how to change the font color.

I used this one to edit the menubar

#top div.main-nav {
font-size:13px;
background:#f9f9fb;
font-weight:normal;
}

But for instanse it does not change the backgroud for the dropdown, but it does change the font size also in the dropdown.. funny..

Is thre anyway to edit the dropdown text and backgroud separately from the menubar?

If possible I would love to remove the underline from the text in dropdown and change it to dark grey color like with the bloggroll is when you are hoverin above it.. is it possible?

Many thanks!!
designsimply · Member · Jan 31, 2012 at 5:47 pm
Copy link
Could you link us to your blog please? You may also want to update the Webisite field in your Users → Personal Settings page because the one linked right now leads to a deleted site.
kpuro · Member · Jan 31, 2012 at 6:04 pm
Copy link
Now my username should be linked to the blog that we are talking about :)

which is:

http://puronorth.wordpress.com
designsimply · Member · Jan 31, 2012 at 6:04 pm
Copy link
Perfect! Looking through your questions now.
kpuro · Member · Feb 1, 2012 at 1:23 pm
Copy link
Hi,

Just figured out how to move the manubar below the slideshow, but when I change the page it ofcource in the wrong place then :) .. Not sure if there is any solution to that.?

I had to close the blog, cause it’s not really ready for public, but I added you there, so that you should be able to have a look at the blog.

Many many thanks for the help!!
thesacredpath · Member · Feb 1, 2012 at 5:53 pm
Copy link
Since your site is private, you will need to wait for @designsimply to have a look. I’m just a volunteer and cannot view private sites.
designsimply · Member · Feb 2, 2012 at 5:49 pm
Copy link
Ah! Apologies, I lost track of this before!
designsimply · Member · Feb 2, 2012 at 5:50 pm
Copy link
1. Move the menubar below the slideshow?

Try this to move the menubar in the Modularity Lite theme below the image in your blog. Note that the top value would need to be re-adjusted if you changed the image showing there now to one with a different height. Try it and see what works best:
```
#top div.main-nav li:first-child a {
padding-left: 0;
}
#top div.main-nav {
position: absolute;
top: 500px;
}
```
designsimply · Member · Feb 2, 2012 at 9:55 pm
Copy link
2. Grow the size of the menubar (also the font size)

Add a font-size rule:
```
#top div.main-nav {
font-size: 150%;
position: absolute;
top: 500px;
}
```
Customize the percentage as necessary.
designsimply · Member · Feb 2, 2012 at 10:08 pm
Copy link
3. Change the colour of the menu bar (also the colour of the menu dropdown)

You can change out the entire menu bar background color with this:
```
#top div.main-nav {
background: #F9F9FB;
}
```
You can change the submenu background size with this:
```
#top div.main-nav ul ul a {
background: #BBD0DF;
color: #333333;
}
```
designsimply · Member · Feb 2, 2012 at 10:12 pm
Copy link
4. Change the font style and font colour in the menubar

Try using the options on the Appearance → Custom Design → Fonts page first.

These parts of the CSS control the menu font color and submenu font color in the Modularity Lite theme:
```
#top div.main-nav a {
color: tomato;
}

#top div.main-nav ul ul a {
color: tomato;
}
```
Change ‘tomato’ to another color: http://www.w3.org/TR/css3-color/#svg-color
kpuro · Member · Feb 7, 2012 at 8:36 am
Copy link
Perfect! Thank you very much! It took a while for me but it looks good now!

Just one more thing. If I zoom in or out on the screen or use a bigger screen the menu bar moves also, normally to the right.

Is there anyway to fix this? I can’t really set it into only one screen size.

Thank you!
designsimply · Member · Feb 16, 2012 at 10:13 pm
Copy link
You’re latest updates should’ve fixed that zoom/shift thing. Are you all good now? :)

No items found.