Edit CSS for Menu Navigation

**ralph.m** · May 8, 2012 06:10

Originally Posted by Stormy Para

once I implemented the codes in, my top menu floats to the left.

OK, where is it supposed to be again?

**Stormy Para** · May 8, 2012 06:12

Hi,

The top menu is supposed to be align right. Lastly, it is also affecting the drop down menu. Thanks!

Regards,
Chris.

**ralph.m** · May 8, 2012 06:29

I'm afraid this code is becoming a bit of a dog's breakfast. Sorry about that, but it's late here and I'm feeling lazy. This should give you what you want:

Code:

#menu-menu li li.last-child {
  float: left;
}

#access #menu-menu li li.last-child a {
  background-color: #669999 !important;
  color: white;
  padding: 10px 15px;
}

#access #menu-menu li li.last-child a:hover {
  background-color: #336666 !important;
}

#menu-top-navigation-menu {
  float: right !important;
}

**Stormy Para** · May 8, 2012 07:06

Hi,

Sorry that it is taking up your time. Thanks for the help rendered, you are of great help.

Regards,
Chris.

**ralph.m** · May 8, 2012 07:11

Originally Posted by Stormy Para

Sorry that it is taking up your time.

No problem at all. That's why we hang around here. Do come back again.

**Stormy Para** · May 8, 2012 07:14

Hi,

For my home page, it will be displaying the link "DENSO Global website". For the rest of the remaining page, it will be displaying "Home". Can this be done?

Regards,
Chris.

**ralph.m** · May 8, 2012 07:29

Hm, normally that would be fine. A simple approach would be to insert a bit of PHP into your template to serve up something depending on the current page. But with this auto-generated menu, it would require something more. I'm afraid that's a bit over my head, and might be something you'd need to ask in the WordPress forum.

**Stormy Para** · May 8, 2012 08:00

Thank you for the redirect!

**Stormy Para** · May 8, 2012 20:18

Hi,

Does anyone a quick fix for the following issue:

I am using a free plugin from WordPress to generate a slideshow banner, the plugin is called Easing Slider.

Please refer to the picture for reference: http://insurancecommissionrefund.com...tachment_2.jpg

The actual website can be found here: http://insurancecommissionrefund.com/dropdown/

How to I set a left padding to 0 for the Slide Show only?

I can use the codes:
div#content .padder {
padding-left: 0px;
}

to align all the contents for the whole website. But I would like to only move the Slide Show without affecting the rest of the pages, is there any workaround for this issue?

Regards,
Chris.

**ralph.m** · May 8, 2012 20:28

It can be done, but the first thing you need to do is reset the image widths to 900px. Then you can make the container the same width and move it around with negative margins.

**Stormy Para** · May 8, 2012 20:30

Hi Ralph,

It is you helping me again, thank you. I have reset the image width to 900px, what are the next steps?

Just a gentle reminder, I am using a shortcode to generate the slideshow.

Regards,
Chris.

**ralph.m** · May 8, 2012 20:33

Cool. Now just try adding this to your style sheet:

Code:

#lofslidecontent45 {margin-left: -20px;}

**Stormy Para** · May 8, 2012 20:35

Hi,

Amazing, it works! Can you share some advices on how do you go about checking the ID name for all these?

If I have a company, I will definitely employ you!

Regards,
Chris.

**ralph.m** · May 8, 2012 21:48

Originally Posted by Stormy Para

Can you share some advices on how do you go about checking the ID name for all these?

It's really easy. If using a browser like Chrome, Safari or Firefox (with Firebug installed) just right click on the element in question and yu see all the HTML and CSS relative to that element right on the page. Then it's easy to modify it to suit.

I also use a nice add-on called CSS Terminal that provides another way to experiment with new CSS rules. Bot add-ons are free and take only a few seconds to install.

**Stormy Para** · May 16, 2012 21:42

Hi Ralph,

How do I go about adding another link beside the "DENSO Global Site"? I wanted to have a "Home" link next to the "DENSO Global Site"

http://insurancecommissionrefund.com/dropdown/

Regards,
Chris

**Stormy Para** · May 17, 2012 03:03

Hi,

Could you explain to me the steps that we have earlier?

These are the steps that I have implemented from you the previous time.

#menu-menu .last-child {float: right;}
-

#menu-menu .last-child a {color: black; padding: 0 40px 0 0;}
-

div.menu ul {float: none !important;}
-

#access #menu-menu li.last-child a {background-color: transparent !important;}
-

#menu-menu li li.last-child {float: left;}
-

#access #menu-menu li li.last-child a {
background-color: #669999 !important;
color: white;
padding: 10px 15px;
}
-

#access #menu-menu li li.last-child a:hover {
background-color: #336666 !important;
}
-

#menu-top-navigation-menu {
float: right !important;
}
- This is to float the top nav menu "Secure", "Dealer Login", etc to the top right?

#access {
background: #336666 url("http://insurancecommissionrefund.com/dropdown/wp-content/uploads/2012/05/Button_End_Caption.jpg") no-repeat 100% 100% !important;
}
-

Regards,
Chris.

**ralph.m** · May 17, 2012 05:49

Could you make it a little cearer where you want this link to go and what it should look like? Perhaps with a graphic.

Normally, people would expect the home link to be over to the left. An alternative (common these days) is to make the logo itself the Home link.

**Stormy Para** · May 17, 2012 06:04

Hi Ralph,

This is what I managed to get to so far.
http://insurancecommissionrefund.com/dropdown/

I have make a Home Menu and also the Logo itself as the home link but clients wanted to have the home link next to the "DENSO Global Site"

I am stuck at the step where the "Home" like be default has the mouse over effect.

Regards,
Chris

**ralph.m** · May 17, 2012 06:27

Originally Posted by Stormy Para

I am stuck at the step where the "Home" like be default has the mouse over effect.

I'm still not really sure what you want it to look like.

**Stormy Para** · May 17, 2012 06:39

Hi Ralph,

This is what I am having now.
http://insurancecommissionrefund.com.../05/Before.jpg

This is what I wanted to achieve.
http://insurancecommissionrefund.com...2/05/After.jpg

Basically I just wanted to be the same as the link "DENSO Global Site".

Regards,
Chris

**ralph.m** · May 17, 2012 07:33

I'm kind of ashamed to offer you such a mess of code like tis, but I find it hard to tidy people's CSS remotely. So here's some quick, dirty and bloated code that hopefully will get you what you want:

Code:

#menu-menu #menu-item-1405, #menu-menu #menu-item-1406 {
   float: right; margin-right: 25px;
}

#access ul #menu-menu li#menu-item-1405 a, #access ul#menu-menu li#menu-item-1406 a {
   color: black; background-color: transparent !important; padding: 0 0 0 0 !important;
}

#menu-menu .last-child a {
  padding: 0 !important;
}

#access ul#menu-menu li#menu-item-1406 {
   background-color: transparent !important;
}

#access ul#menu-menu li#menu-item-1406 a:hover {
   color: white;
}

**Stormy Para** · May 17, 2012 07:51

Hi Ralph,

I just copy everything but there is one issue. If you mouse over one of the navigation menu 'About DENSO", the padding and alignment is off as compared to the rest of the mouse over menu.

Regards,
Chris

**ralph.m** · May 17, 2012 08:00

Looks OK to me. Could you make a screen shot of what you see?

**Stormy Para** · May 17, 2012 08:05

Hi Ralph,

Here is what I see.
http://insurancecommissionrefund.com.../05/After1.jpg

Before that, there is an issue for the first link too. I believe this is the CSS code you give me to solve that issue regarding.

/*Menu Last Item - Set Background Color On Mouse Over*/
#access #menu-menu li li.last-child a:hover {
background-color: #336666 !important;
}
/*Menu Last Item - Set Background Color On Mouse Over*/

/*Menu Last Item - Set Default Background Color, Font Color, Padding*/
#access #menu-menu li li.last-child a {
background-color: #669999 !important;
color: white;
padding: 10px 15px;
}
/*Menu Last Item - Set Default Background Color, Font Color, Padding*/

**Stormy Para** · May 17, 2012 18:49

Hi Ralph,

I have managed to solve the above mentioned issue, thanks for the help so far

Regards,
Chris

User Tag List

Thread: Edit CSS for Menu Navigation

Thread Tools

Display

Bookmarks

Bookmarks

Posting Permissions