Return to previous page

Navigation Padding / Margin - by polespino

This topic has 24 replies, 4 voices, and was last updated 9 years, 8 months ago ago by Eva Kemp

polespino

Participant

August 4, 2014 at 08:17

Hi there,

Just wanted to trim down my sub menu items, how do I change the height / spacing of each box for sub menu items?

Also colors and hover options?

Cheers!

Please, contact administrator
for this information.

#11677 Copied

23 Answers
Eva Kemp

Support staff

August 4, 2014 at 09:08
Hello,

To change background color for sub items you need add this code into custom.css file:
```
.main-nav .menu > li .nav-sublist-dropdown .container > ul > li a {
    background-color: blue;
}
.main-nav .menu > li .nav-sublist-dropdown .container > ul > li a:hover {
    background-color: red;
}
```
Change the color value to yours.
To change height please use this code:
```
.main-nav .menu > li .nav-sublist-dropdown .container > ul .menu-item-has-children {
    height: 50px;
}
```
Also change the value to yours.

Regards,
Eva Kemp.
#11689 Copied
polespino

Participant

August 4, 2014 at 09:58

Ok that worked.

How about the second to 4th level submenus ?

Also, how to make sure that the text will have even margins on top and bottom of the box?

Thanks

#11696 Copied
Eva Kemp

Support staff

August 4, 2014 at 10:26
Hello,

To have margins you can use this code:
```
.main-nav .menu > li .nav-sublist-dropdown .container > ul .menu-item-has-children {
    margin-top: 10px;
    margin-bottom: 10px;
}
```
Just change the values.
Please clarify your question regarding “second to 4th level submenus”.
Thank you.

Regards,
Eva Kemp.
#11698 Copied
polespino

Participant

August 4, 2014 at 12:23

If you’ll notice on my submenus under Products – Brands – and so fort the height of the boxes differ from the 1st level submenus

Please visit : http://www.rasterizedesigns.com/demos/motoworld/ and then hover over products – brands – Brands A-H – LS2

The height of the boxes are different 🙂

#11710 Copied
Eva Kemp

Support staff

August 4, 2014 at 12:27
Please try to use this code:
```
.main-nav .menu > li .nav-sublist-dropdown .container > ul .menu-item-has-children .nav-sublist li {
    height: 40px;
}
```
Regards,
Eva Kemp.
#11711 Copied
polespino

Participant

August 4, 2014 at 13:03

That worked well for the height of the boxes, but adding the margin code also affects the boxes. So I tried padding, didn’t work with me.

Please try visiting the link again and hover the products link 🙂

http://www.rasterizedesigns.com/demos/motoworld/

Please, contact administrator
for this information.

#11719 Copied
Eva Kemp

Support staff

August 4, 2014 at 13:27
I’ve added the following code into custom.css file:
```
.main-nav .menu > li .nav-sublist-dropdown .container > ul > li a {
    padding-top: 5px;
    padding-bottom: 5px;
}
```
Please check the menu now.

Regards,
Eva Kemp.
#11722 Copied
polespino

Participant

August 4, 2014 at 13:36

Awesome!

Thanks so much 🙂

#11724 Copied

polespino

Participant

August 4, 2014 at 13:50

Ok one more thing, on the contact page template, how do remove the page heading?

Tried to remove on the page heading option but no go.

http://www.rasterizedesigns.com/demos/motoworld/?page_id=147

#11725 Copied
Eva Kemp

Support staff

August 4, 2014 at 14:39
Hello,

You need add this code in custom.css:
```
.page-heading h1 {
    display: none;
}
```
Please note the title will be removed from all pages, not only on Contact page.

Regards,
Eva Kemp.
#11733 Copied
polespino

Participant

August 4, 2014 at 23:07

That’s fine 🙂

Also need to adjust the boxes on the navigation of the sticky menu (when you scroll down), just like what I have now in the standard menu?

Plus, when using chrome I noticed the arrow sign or “>” for submenus is gone while in firefox its still there. Bug perhaps?

Thanks for the awesome support!

#11763 Copied
Eva Kemp

Support staff

August 5, 2014 at 11:02
Hello,

Please use this code for fixed header manu:
```
.fixed-header .menu > li .nav-sublist-dropdown .container > ul > li a {
   height: 40px;
   padding-top: 7px;
}
```
Regards,
Eva Kemp.
#11783 Copied
polespino

Participant

August 5, 2014 at 12:55

Perfect!

Done with that site, now if you don’t mind. Here’s another one.

How do you trim the height of the header? What I’m doing right now is applying a negative margin on my rev. slider to push it up.

Here’s the css im using

.header-wrapper.header-type-4 {max-width:none; margin:-30px;}

and the link is on the private content

Please, contact administrator
for this information.

#11794 Copied

Eva Kemp

Support staff

August 5, 2014 at 12:59

Could you please clarify?
Are you trying to change the height of the header?
Thank you.

Regards,
Eva Kemp.

#11796 Copied

polespino

Participant

August 5, 2014 at 15:03

Yes. Trying to make it as tight as possible.

Thank you!

#11808 Copied
Jack Richardson

Support staff

August 5, 2014 at 15:18
Hello,

Please remove the code which you have added and add the following code into the custom.css:
```
.header-type-4 .main-nav .double-border {
padding: 0;
}
```
Regards,
Jack Richardson
#11809 Copied
polespino

Participant

August 6, 2014 at 01:06

That worked perfectly.

Ok. How about setting the height of the parallax image ?

link in Private content

Thanks

Please, contact administrator
for this information.

#11838 Copied
Robert Hall

Support staff

August 6, 2014 at 06:03
Hello,

Put this code into custom.css file.
```
.page-content .parallax-section {
height:350px;
}
```
Regards,
Robert Hall.
#11854 Copied
polespino

Participant

August 6, 2014 at 23:13

Fixed!

I apologize but just ironing some bugs.

I noticed that my logo isn’t centerting correctly when used on a smartphone?

Please, contact administrator
for this information.

#11968 Copied
1 2

Viewing 20 results - 1 through 20 (of 24 total)