Jump to content
Sign in to follow this  
paypalrocanbiz

Customize Nav Bar

Recommended Posts

paypalrocanbiz

Hello, I have been searching around in the forum for answers to how I can create a custom navigation menu bar for my iblog4 theme... but cannot seem to find the answer I desire. Here is an image of what the standard generated menu bar looks like on my site: nav-bar-iblog4.jpg Below is an image I had made of what I want the nav bar to look like: nav-bar-new1.jpg As you can see, I have a custom color gradient in the back, the fonts are a little cleaner, and I have a custom search box on the right. I have a feeling this may take some custom coding in my theme? If so, is there someone who can make it happen for me? If there is an easy way to do this, I am all ears. Thanks for the help in advance!

Share this post


Link to post
Share on other sites
catrina

Hi, Yes, this will involve some custom coding in your theme. The navigation bar contents can be styled in the theme.css file located in the theme files folder. Do you have the custom color gradient ready (without the text links and side borders that separate the text links)?


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
paypalrocanbiz

Hello, thanks for the reply. Yes I have my custom nav bar in photoshop .psd format, so I can turn off the words, separator lines and even the search box if necessary. Here is what it looks like blank: NGD_nav-bar-blank.jpg

Share this post


Link to post
Share on other sites
catrina

A JPG of this (optimized for the web) is all you need for the navigation bar. Just make sure it's the correct width first so it can fit in seamlessly. The separator lines will come up automatically (since they're already implemented in the theme) and the words will also automatically appear as text links (which can be styled the way you want them by editing the CSS).


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
paypalrocanbiz

Thanks again for the help. I have added the background img for the nav, and I got rid of the bolding for the text. nav-bar-new2.jpg Is there anyway to change the seperator bars to a different image? The default is too dark to go with my new nav.

Share this post


Link to post
Share on other sites
catrina

To change the separator bars, save the separator bar you custom-made as a PNG named navdivider, upload it, and it should overwrite the default separator that is already there.


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
paypalrocanbiz

Cool. Thanks Catrina! I have my nav bar finished now. One thing, since I was using the pro blue, I had to upload my separator img to the /pro/images/ folder and called it navdivider-blue.png. Here is what the nav bar looks like now: nav-bar_done.jpg

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  

×