Return to previous page

CSS Settings for Navigation - by polespino

This topic has 13 replies, 4 voices, and was last updated 9 years, 9 months ago ago by Robert Hall

polespino

Participant

July 17, 2014 at 07:26

Hi there,

Great theme, Just wanted to know the following correct settings to up for custom.css, I’ll be using this theme for a couple of sites so I’d like to get the gist of it.

I’ve searched the forum for days now but…

1. How do I lower the height of the navigation bar?

2. CSS settings for Navigation and sub menu ? Right now , I prefer my main navigation to be white in red background and then on the sub menu to have a red background and white text. I’ve tried thinkering with it but my css selectors arent perfect.

3. On the sticky menu, what are proper css selectors to change color ? Links ? etc?

4. Get rid of other footer widgets like prefooter footer 1 etc ? Right now I have to use a negative margin to overlap the existing code. Maybe there is a cleaner way?

5. Mobile Navigation CSS selectors? LIke change color background etc ?

I think it would be great if all these customization would be available on the theme settings 🙂

Demo site is : http://www.rasterizedesigns.com/demos/motoworld/

Cheers!

#10070 Copied

12 Answers
Jack Richardson

Support staff

July 17, 2014 at 07:49
Hello,

1) To decrease height of navigation bar you have add the following code into the custom.css:
```
.fixed-header .menu > li > a, .main-nav .menu > li > a {
padding: 5px 5px;
}
```
2) To change background color of sub-menu add the following code into the custom.css:
```
.main-nav .menu > li .nav-sublist-dropdown {
  background-color: #F00 !important;
}
```
and change “#F00” to your desired color.
And to change font-color of sub-menu add this code:
```
.fixed-header .menu > li.menu-full-width .nav-sublist-dropdown .container > ul > li a, .main-nav .menu > li.menu-full-width .nav-sublist-dropdown .container > ul > li a {
color: #FFF;
}
```
3) To hide some widget area you can remove all widgets from there and add empty text widget instead.

4) Change background color you can in Theme Options -> Color Scheme. But before this you should change site layout to boxed in Theme Options -> General.

Regards,
Jack Richardson
#10073 Copied
polespino

Participant

July 21, 2014 at 03:03

Thanks very much! Follow up question if you don’t mind.

1. How do I change the color of the link of the navigation particularly the Hover , active and normal color of text?

2. Is it possible to add a static text on the navigation bar? Like at the rightmost part of the header ? I’d like to put the a external link that is right aligned 🙂

Same thing with the sticky link? Mine keeps following the theme css.

Thanks again!

#10254 Copied
Robert Hall

Support staff

July 21, 2014 at 06:11
Hello,

1) To change color of navigation menu and active page you can add this code to custom.css
```
.main-nav .menu > li.current-menu-item > a {
color: green !important;}

.menu-main-menu-container a {
color:red;
}
```
2) Sorry, it’s not impossible, but you can add external link in some page of the menu.

Regards,
Robert Hall.
#10255 Copied
polespino

Participant

July 21, 2014 at 22:26

Great thank you!

Another question. On the sticky menu, on the links up top?

My hover and active links are white instead of black. I’d like to have the same white background and black links just like on this website.

Please note its the sticky navigation bar when you scroll down.

Please refer to current demo : http://www.rasterizedesigns.com/demos/motoworld/

Thank you very much!

#10380 Copied

polespino

Participant

July 21, 2014 at 22:53

Oh and another thing.

Since I removed the other footers, my margin on the content area are overlapping with the footer text widget I made.

Please see below:

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

Any Ideas?

THanks

#10381 Copied
Robert Hall

Support staff

July 22, 2014 at 06:20
Hello,

Add this code and issues will be solved.
```
.fixed-header {
background:black:
}
.menu-main-menu-container a {
color: white;
}
.footer-bottom-2 {
margin-top:0;
padding-top:0;
}
```
Regards,
Robert Hall.
#10390 Copied
polespino

Participant

July 26, 2014 at 03:56

Almost done. Thanks so much.

Another question.

How can I have the submenu links to right align instead of the default left ?

Please check under “Products 2” on our demo site

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

You’ll notice that it goes to the left when Products 2 – Brands – Brands A-H , I’d like it to go to the right.

Cheers.

#10827 Copied
Eva Kemp

Support staff

July 26, 2014 at 09:10
Hello,

Please use this code to change the submenu links alignment:
```
.main-nav .menu > li:nth-last-child(2) .nav-sublist-dropdown .container > ul .menu-item-has-children .nav-sublist {
    left: 199px !important;
    right: auto !important;
}
```
Regards,
Eva Kemp.
#10838 Copied
polespino

Participant

July 26, 2014 at 21:32

Tried that under custom.css but didn’t work for Chrome and Firefox, IE though is partially broken.

Please check , products 2 nav link under

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

I’d like to note that I left aligned (text only) for the navigation, I don’t think that is related but I just wanted to let you know.

Provided admin access under private content just in case you’ll need to take a look.

Thank you

Please, contact administrator
for this information.

#10875 Copied

Eva Kemp

Support staff

July 27, 2014 at 10:29

Hello,

The problem was the symbol “>” in the code which you copied was interpreted like “& g t;”. I’ve corrected it and submenus are showing fine now.
Please check and clear browser cache before.

Regards,
Eva Kemp.

#10889 Copied

polespino

Participant

July 28, 2014 at 00:28

Ah i see.

Thanks so much!

#10920 Copied

Robert Hall

Support staff

July 28, 2014 at 06:18

You’re welcome!

Regards,
Robert Hall

#10927 Copied
Tagged: navigation, settings, themes, woocommerce, woocommerce wordpress, wordpress
Viewing 13 results - 1 through 13 (of 13 total)