Jump to content
Sign in to follow this  
joel

Menu Bar Graphics?

Recommended Posts

joel

Hello All, I'm rebuilding a site for someone who would like the site to look as much as possible as the old one. Here is the old one http://www.admin-assist.com What I'm working on is the Menu. Is there a way to do the following: 1) Spread the menu out to the width of the site 2) Put those graphic images in place of the just changing the color. Unfortunately there is the button and an end to each each side of the bar. If I could get close is all I need to do. 3) Where is the file to make the changes and what would be the code to use? Thanks, Joel

Share this post


Link to post
Share on other sites
cmunns

What is your current theme, dev link, etc?

Share this post


Link to post
Share on other sites
catrina
1) Spread the menu out to the width of the site
The menu should do that by default, but I don't know what your new site looks like now.
2) Put those graphic images in place of the just changing the color. Unfortunately there is the button and an end to each each side of the bar. If I could get close is all I need to do.
It's possible with CSS, which can be placed in Settings > Custom Code > CSS. Posting a link would help. :)

Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
catrina

It looks like the menu is already spread full-width to the site (the content column), unless you mean that you want the menu to spread the full width of the entire page. If you already have the green graphics that are supposed to be input into the menu items, they can be inserted using the following code:

ul#menu-main-menu div.main-nav li#menu-item li.menu-item {background-image: (url:'http://FULLIMAGEURLFORGRAPHIC');}


Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
joel

okay.....going to leave me hanging like that. I'm think I don't need the "ul" in front.

Share this post


Link to post
Share on other sites
joel

No but I'm not sure if I put it in the right location I put it in the "Custom Code" section to no avail... I need to play with the code some more to make sure what I have is right. I think it's wrong because it disabled some other code that I put in.

Share this post


Link to post
Share on other sites
joel

YES Adam, That worked like a charm! okay, is there a way to add some "ends" to it? like here http://www.admin-assist.com/ I know I'm being demanding...and apologize, but I am learning a lot about editing this template. Thanks!

Share this post


Link to post
Share on other sites
catrina

You can fill in the last bit of white space with that green graphic using this CSS:

ul#menu-main-menu div.main-nav {background-image: url('http://GREENGRAPHICIMAGEURL') no-repeat right bottom;}


Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
joel

That didn't work with the "ul" in front of the item it also made the other changes that I made before (that were below disappear. Without the "ul" they show back up but the images didn't get placed. :-( Thanks though. am I doing something wrong? I put the css in the custom css next to the other one above.

Share this post


Link to post
Share on other sites
Kate

Hey Joel, One of two things: You can use Catrina's suggestion, but make sure you're putting your own image URL in the background area. This image would be the entire menu. Or, use Adam's suggestion, and use the ID of the first and last menu items to specify a different image for each of those. This is really all more about knowing CSS as opposed to knowing the theme ;)

Share this post


Link to post
Share on other sites
joel

Kate, I did put my own url for each of the different images (one left and one right) and changed the code for the left one to left bottom to match the left graphic. It still didn't work for either left or right. I must be missing something but then why would it disable the other codes I had after it in my "custom css" area? I'll play with it some more in the morning when I'm fresh.

Share this post


Link to post
Share on other sites
joel

Kate, The code from Catrina didn't work for me for some reason - don't know why. If I could put the image and repeat it, like Adam had me do, across the entire area that would be great. This works if I have the page set up differently in Design Control area. Right now I have fixed width. Of course I would like to center the entire menu across as well but I can work on the words to make them space it out

Share this post


Link to post
Share on other sites
Kate

Hey Joel, Usually "disabling" other styles after it is a result of leaving off an end bracket. Make sure you have that ;)

Share this post


Link to post
Share on other sites
joel

I've tried these two: 1) Together 2) Separate http://web.prioritiesbydesign.com/admin-assist/ Only the first one seems to do anything. I would like that entire space covered with the graphic included the white areas as was mentioned above but can't seem to get anything to work except the first one which is great. .main_nav ul li { background: url('http://web.prioritiesbydesign.com/admin-assist/wp-content/uploads/2011/07/navbar_bg_tile.gif'); } ul#menu-main-menu div.main-nav {background-image: url('http://web.prioritiesbydesign.com/admin-assist/wp-content/uploads/2011/07/navbar_bg_tile.gif') no-repeat right bottom;} I did use this code at one point to put a color in. I'm thinking I would just need to modify by replacing color with image. Would that work to spread the image edge to edge on a fixed width site? #primary-nav .texture { background-color: #xxxxxx; color: #xxxxxx !important; } .sf-menu li, #primary-nav ul.sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active { background-color: #xxxxxx; } .main-nav li.current-page-ancestor a, .main-nav li.current_page_item a, .main-nav li.current-page-ancestor ul a, .main-nav li.current_page_item ul a, .sf-menu li li, .sf-menu li li, .sf-menu li li li { background: none repeat scroll 0 0 #xxxxxx; color:#xxxxxx !important; } .main_nav .main-nav li a:hover, .current_page_item a, .current_page_item ul li a:hover, .sf-menu li:hover, .sf-menu li.sfHover {???background: none repeat scroll 0 0 #xxxxxx;???color: #xxxxxx !important;???}

Share this post


Link to post
Share on other sites
joel

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

×