Edit CSS for Menu Navigation

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.

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”

Hi Ryan,

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

Regards,
Chris

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;}

Hi Ryan,

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

Regards,
Chris.

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.

Hi,

It work perfectly. Thanks!

Regards,
Chris

Hi,

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

Regards,
Chris.

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

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.

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;}

Hi Ralph,

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

Regards,
Chris.

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

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.

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”.

Hi,

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

Regards,
Chris.

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.

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.

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.

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?