The forum of the forums
Would you like to react to this message? Create an account in a few clicks or log in to continue.

Simple Clear Css Navbar Buttons

+2
SarkZKalie
_Twisted_Mods_
6 posters

The forum of the forums :: Miscellaneous :: Community Coding and Analysis Zone

Go down

Simple Clear Css Navbar Buttons Empty Simple Clear Css Navbar Buttons

Post by _Twisted_Mods_ March 2nd 2019, 5:42 pm

Example

Simple Clear Css Navbar Buttons YHcigIy


CSS

Code:

.navlinks{background:transparent!important;}
a.btn-light {
    color: #fff;
    background-color: rgba(255,255,255,.125);
    border-color: rgba(255,255,255,.125);
    font-size: .70rem!important;
    font-weight: 500!important;
    letter-spacing: 1px;
    padding: 9px 19px!important;
    border-radius: .25rem!important;
    text-transform: uppercase;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, .075);
    height: auto!important;
    line-height: inherit!important;
    display: inline-block;
    width: auto;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    user-select: none;
    border: 1px solid transparent;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    margin: 2px;
    box-sizing: border-box!important;
}
.btn-light:hover {
   background-color: rgba(255, 255, 255, 0.18);
   border-color: rgba(255, 255, 255, 0.18);
}


Javascript

Code:

$(function(){
   $('.navlinks a').attr('class','btn-light');
});   
_Twisted_Mods_
_Twisted_Mods_
Helper
Helper

Male Posts : 2083
Reputation : 336
Language : English
Location : Ms

http://liquidcode.forumotion.com

yonev likes this post

Back to top Go down

Simple Clear Css Navbar Buttons Empty Re: Simple Clear Css Navbar Buttons

Post by SarkZKalie March 11th 2019, 8:01 am

Does it work on all version?

Thank you


Simple Clear Css Navbar Buttons Sarkzk10
SarkZKalie
SarkZKalie
Support Moderator
Support Moderator

Male Posts : 1443
Reputation : 220
Language : English

https://rotavn.forumotion.com/

Back to top Go down

Simple Clear Css Navbar Buttons Empty Re: Simple Clear Css Navbar Buttons

Post by The Last Outlaw March 11th 2019, 4:04 pm

It works for me. I have a scrollable Nav Bar. I have to admit. It looks GOOOOOOOOOD!!!
The Last Outlaw
The Last Outlaw
Forumember

Male Posts : 430
Reputation : 11
Language : English (US)
Location : Salem, Oregon, USA

https://www.betheasbyte.com/

Back to top Go down

Simple Clear Css Navbar Buttons Empty Re: Simple Clear Css Navbar Buttons

Post by tikky April 18th 2020, 1:35 am

Amazing!
Nevertheless is possible use this code without JavaScript, just use (native navbar):
Code:
 .navlinks{background:transparent!important;}
a.mainmenu {
    color: #fff;
    background-color: rgba(255,255,255,.125);
    border-color: rgba(255,255,255,.125);
    font-size: .70rem!important;
    font-weight: 500!important;
    letter-spacing: 1px;
    padding: 9px 19px!important;
    border-radius: .25rem!important;
    text-transform: uppercase;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, .075);
    height: auto!important;
    line-height: inherit!important;
    display: inline-block;
    width: auto;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    user-select: none;
    border: 1px solid transparent;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    margin: 2px;
    box-sizing: border-box!important;
}
a.mainmenu:hover {
  background-color: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.18);
}
tikky
tikky
Forumember

Posts : 922
Reputation : 160
Language : 🇵🇹

https://www.forumotion.com/create-forum/modernbb

sivastar likes this post

Back to top Go down

Simple Clear Css Navbar Buttons Empty Re: Simple Clear Css Navbar Buttons

Post by YoshiGM April 19th 2020, 7:09 pm

Great job @_Twisted_Mods_
I like it Very good
YoshiGM
YoshiGM
Active Poster

Male Posts : 1560
Reputation : 146
Language : Spanish & English
Location : Mexico

http://asistencia.foroactivo.com/u21373

Back to top Go down

Simple Clear Css Navbar Buttons Empty Re: Simple Clear Css Navbar Buttons

Post by BlackScorpion April 21st 2020, 4:13 am

Another Great Job Buddy! This looks great for a light colored forum.
BlackScorpion
BlackScorpion
Graphic Designer
Graphic Designer

Male Posts : 7043
Reputation : 920
Language : English
Location : USA

https://help.forumotion.com/f6-graphic-design-section

Back to top Go down

Back to top

- Similar topics

The forum of the forums :: Miscellaneous :: Community Coding and Analysis Zone

 
Permissions in this forum:
You cannot reply to topics in this forum