Web Developers (Bootstrap Navbar)

Here you can discuss anything related to technology as well as ask for help if you have an issue related to your PC or devices.
4 posts Page 1 of 1

Hawk

User avatar
Hawk
Posts: 529
Joined: December 19, 2010, 2:27 pm

Post by Hawk » September 14, 2016, 6:58 am
Hey guys!

I do know that there's quite a few web developers here.
I wish to create a customised navbar with bootstrap to give it a unique look from other websites.

Basically I managed to change colours, borders, link hovers (basic stuff) and so on by overwriting the CSS of bootstrap.cs from the styles.css (my custom CSS file) .

But the question is this:

How do I make it look professional?

Are there any specific plug-ins or generators? Or is it just purely CSS?

These are the examples of the current navbar which I am building, that I don't find professional at all!

PC:
Image

Responsive:

Image

I need to make it more unique, yet simple... any ideas?

Thanks!
Image

Robin

User avatar
Robin
Donator
Posts: 12368
Joined: October 27, 2014, 11:08 am

Post by Robin » September 14, 2016, 7:06 am
Use Adobe Dreamweaver for the overall layout, give the finishing touch by hand and CSS.
Retired community player 2013-2020
★ Retired LSPD United Chief of Police ★
★ Retired S.A. Army General ★

Spoiler: show
Spoiler: show

NotAnAdmin

User avatar
Notan
Donator
Posts: 1120
Joined: October 12, 2014, 7:49 am
Location: yo mama

Post by NotAnAdmin » September 14, 2016, 7:26 am
I have worked a lot on navbars, so I know a bit :D
First things first, keep the color combination ready. That isn't a great red, use flatuicolors.net for great and responsive looking colors
Next, use the Transition effect to make it a bit interactive. Not too much, that screws up. A little bit, and that should do the trick to keep it interesting.
Make use of the #active class as well. Use it to give custom css to the page the user is on.
Also, If I was you, I'd go for a sidebar. They can slide away easily, they also can be made to look very professional, much more than top navbars. + The Font Awesome icons look real neat there, and on mobile, you could omit the world and just use icons on the sidebar. + Nested Sidebar entities look better than dropdown navbar stuff, but personal opinion
I could help you out with the development of your website, I love this kind of stuff. Here's an attached image to show you how a professional sidebar may look:
Closed:
Image
Open:
Image
Note: Opening/Closing is either hover based or button based, whatever the need be
Feel free to message me any time you need any more help! I'd love to be helping out on this project :D
Image

Hawk

User avatar
Hawk
Posts: 529
Joined: December 19, 2010, 2:27 pm

Post by Hawk » September 16, 2016, 6:26 am
Thanks a lot for your help guys! I appreciate a lot your opinions and your generosity! :flush: :flush: :flush:
Image
4 posts Page 1 of 1
Return to “Tech Talk”

Who is online

Users browsing this forum: No registered users and 2 guests