How do I locate and style my bootstrap link button under my navbar?

I'm fairly decent with .css but am struggling with how to access and style (re-style) my bootstrap link button under my navbar, once the navbar collapses. Below are some screenshots that should be helpful. I just need to know how to "grab" (get a hold of / select) my bootstrap link button so that when the navbar collapses I can change the padding on it. The pictures will show why I want to do this. Once the navbar collapses, the bootstrap link button is slightly off a bit. 8px to be exact.

the link button before the navbar collapses:
bstrpNavbarLnkBtn1.jpg
the link button after the navbar collapses:
bstrpNavbarLnkBtn2.jpg
LVL 1
Michael SterlingWeb Applications DeveloperAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Steve BinkCommented:
Use the "Inspect Element" tool (first icon on the dev tools menu bar, all the way to the right, looks like a magnifying glass) and select the element you want to target.  If you still can't figure out how to target the element with CSS, post a screenshot similar to the ones you have now, but focusing on the lineage (ancestors) of that element.
0
Marco GasiFreelancerCommented:
You can just give it an id and then use this id to set its rules... But the best things would be make the logout link part of the list, as it should be normal. Unless you have some valid reason to keep the logout button outside the navbar-right, make it the last element of the list definitely fixes your issue. And this would be the correct way to do it.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Fajer39Commented:
You can use class .btn and .btn-link in your css and re-style it as you you want if you want a new default look for all other buttons (make sure to place it after the bootstrap.css).

Otherwise use the id and I also recommend to put the button as last <li> elemement in your <ul> list.
0
Michael SterlingWeb Applications DeveloperAuthor Commented:
thank you all
0
Marco GasiFreelancerCommented:
Why the accepted solution gets less points of an assisted solution? Did you want to accept Fajer39's comment as solution and the ine as assisted solution?
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.