Edit CSS for Menu Navigation

[Stormy Para]

Hello all,

I am currently using a free template from wordpress called "Custom Community". The website is over here.

What I would like to achieve is, at the end of the navigation menu, I would like to add a bit of styling to it. Please take a look over here on the styling that I wish to achieve, basically it is a diagonal cut at the end of the menu.

I do not know the source file to edit, I am willing to pay a few bucks even if the problem is solved, hope I am not against any rules, etc.

Any help is greatly appreciated.

[RyanReese]

You mean that curved part? Just make that as an image, and apply it to the parent of the navigation .

Edit-Go into that page, open it up for editing. Apply the BG image to "access"

[Stormy Para]

Hi Ryan,

Yes, I have actually make the images already, but I do not know where to go about inserting that.

Regards,
Chris

[RyanReese]

Add something like this (we can mess with it later if it doesn't look right, I just need hte image code online)

#access{background:url(imagefilehere.jpg) no-repeat bottom right;}

[Stormy Para]

Hi Ryan,

The image appear, but the rest of the menu becomes a white background, thanks for the help so far.

Regards,
Chris.

[ralph.m]

Change your #access rule to this:

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

I added in !important only because the same rule appears quite a few times in your style sheets, so this is to avoid conflicts. It would be better to remove duplicate rules, though, and then remove !important.

[Stormy Para]

Hi,

It work perfectly. Thanks!

Regards,
Chris

[Stormy Para]

Hi,

How would I go about adding a clickable link? Please see the screenshot, thanks.

Regards,
Chris.

[RyanReese]

I'd just add another <li> in your navigation. However, make sure to specify that as float:right, not float:left like the rest.

[Stormy Para]

Hi Ryan,

Thank you so far, what would the codes be? Because everything is automated when I create a new page and set it to show on the menu bar.

Regards,
Chris.

[ralph.m]

Just add a new link, and then you can style it with CSS (we'll help you with that). WP adds a special class and an id to each list item, so one the link is in, it can be targeted via CSS. So, for example, if its id turns out to be "menu-item-40", for example, you can do something like this in the CSS file:

#menu-item-40 {float: right;}

[Stormy Para]

Hi Ralph,

I have created a new link. The id is "8". What are the next steps?

Regards,
Chris.

[ralph.m]

I can't see it on your site yet. Is there an up-to-date link?

[Stormy Para]

Hi Ralph,

I am just using the default wordpress link creation to get the link done, am I doing it the right way?

Regards,
Chris.

[ralph.m]

I am just using the default wordpress link creation to get the link done, am I doing it the right way?

There are better ways (like writing the code by hand and thus avoiding a lot of unnecessary classes and ids) but if this works for you, it's no big deal. What I mean is that the page you showed us doesn't seem to have the new menu link on it yet:

http://insurancecommissionrefund.com/dropdown/

Is that the page we are still meant to be looking at? The last link I see is "Sitemap".

[Stormy Para]

Hi,

Please take a look again. Here is the url --> http://insurancecommissionrefund.com/dropdown/

Regards,
Chris.

[ralph.m]

You could add something like this to your style sheet:

#menu-item-971 {float: right;}
#menu-item-971 a {color: black; padding: 0 40px 0 0;}
div.menu ul {float: none !important;}

It needs work, but is a start.

[Stormy Para]

Hi,

I notice it has a default mouse over effect using for the rest of the menu, am I able to eliminate it for this particular link only?

Regards,
Chris.

[Stormy Para]

Hi,

Is there a way to set padding left for on my home page.

Right now this is the css code to set for all pages.

div#content .padder {
padding-left: 5px;
}

Regards,
Chris.

[RyanReese]

You can do something like

#menuitemhere8:hover{unset styles here}

I'm not seeing that .padder statement anywhere in your CSS. Is your page updated?

[ralph.m]

I notice it has a default mouse over effect using for the rest of the menu, am I able to eliminate it for this particular link only?

The new link has disappeared again. Make sure to keep us in the loop over where you're up to with this, as it's a bit confusing.

[Stormy Para]

Hi,

Sorry, I took it down accidentally without realizing. Please take a look again, thanks. How do you derive the menu item no. from wordpress because I recreated it again and I think the id changed, thats why it is not moving. I also notice the top menu is moved although the float is set to none.

http://insurancecommissionrefund.com/dropdown/

Regards,
Chris.

[ralph.m]

OK, what effect does this have?

#menu-menu .last-child {float: right;}
#menu-menu .last-child a {color: black; padding: 0 40px 0 0;}
div.menu ul {float: none !important;}

[ralph.m]

O, I forgot the hover state too. Add this also:

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

[Stormy Para]

Hi Ralph,

The link right now is what I wanted, thanks for that. However, once I implemented the codes in, my top menu floats to the left. My top menu consist of:
Secure
Supplier Login
Distributor Login

It also affects the last menu item of my drop down list.

Regards,
Chris.