Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Help with css navbar.

  • This topic is empty.
Viewing 15 posts - 1 through 15 (of 16 total)
  • Author
    Posts
  • #38993
    thala
    Participant

    Can any one guide me to create a navbar like this??

    http://i.imgur.com/rqhr9.png

    Thanks much.

    #106503
    amoss
    Participant

    Got this far. (anyone can jump in to help please)
    http://jsfiddle.net/PCCZ8/

    #106529
    Vermaas
    Participant

    Might wanna modify my code: http://jsfiddle.net/savver/wXKbc/

    #106546
    thala
    Participant

    Thank you guys, can this be achieved with images instead of css?

    Like i have all the images for the navbar from the psd!

    #106552

    I’m sure you could apply that look to the image within photoshop, but that would make your image sizes larger, make your page load slower, and lock you into a certain design. There is no positive side to doing it that way. I’d stick with the CSS. Copying and pasting the CSS will literally work after you change it to suit your file names.

    #106560
    Vermaas
    Participant

    @paintba11er89: That’s not completely true. Just make sure the image isn’t that big. And when you use images, you’re for sure it will work in every browser. Also IE7-8.


    @thala
    : So if you don’t care about those browsers, take the CSS3 approach I posted, otherwise use the image and make sure the file is really small.

    #106573
    Paulie_D
    Member

    If you use images it probably won’t scale very well though. I’m not saying it couldn’t be done but it might take a lot of work.

    I suppose the best option would be to take the image that is ‘behind’ the white box and apply that as a background image of the menu div.

    The rest is just styling the ul…no? I’m assuming it’s a single line menu with no dropdowns?

    Without access to the PSD it’s hard to help further.

    #106642
    thala
    Participant

    Edited!!

    #106667
    thala
    Participant

    I appreciate all your help guys.

    Here is the psd of the navbar, if any one wished to help further..

    https://www.dropbox.com/s/hq756r34oyq4bem/template.psd

    Thanks a lot!

    #106812
    thala
    Participant

    Still looking for some one to assist me with, thanks.

    #106816
    Paulie_D
    Member

    That link is not to the psd.

    #106823
    thala
    Participant

    How? i have removed the header green background from the psd.

    https://dl.dropbox.com/s/hq756r34oyq4bem/template.psd?dl=1

    It is just the same (Also the green background is also not necessary sir)

    #106824
    Paulie_D
    Member

    The issue is that I can’t download the psd file for some reason.

    Frankly, it doesn’t matter. You have received some suggestions about how to achieve what you are after but we’re not going to do the work for you.

    Try coding something in Codepen yourself and if you run into issues that you can’t resolve then we can jump in and help.

    #106833
    thala
    Participant

    Thanks for the heads up paul.

    #106861
    thala
    Participant

    Update: I am done with the navbar!!

    http://jsfiddle.net/spiritfly/r97Aa/6/

    I am having problem with showing the selected navbar, any help would be great.

    Cheers.

Viewing 15 posts - 1 through 15 (of 16 total)
  • The forum ‘CSS’ is closed to new topics and replies.