- This topic has 12 replies, 3 voices, and was last updated 2 years, 11 months ago by
.
-
Posts
-
Hi guys,
I would like to modify/make-up the navigation bar. We other themes I have been using this code, but in generatepress it doenst work.
@media (min-width: 768px) {
#navigation .navbar-nav { text-align: center; border: none !important; display: block; width: 100%; margin: 0 !important;}
#navigation .navbar-nav > li { float: none; display: inline-block; border: none !important}
#navigation .navbar { background: #E15908 !important; }
#navigation .navbar { box-shadow: -10px 0 0 #E15908, 10px 0 0 #E15908, 0 2px 12px 2px rgba(0, 0, 0, 0.25); z-index: 99; }
#navigation .navbar:before, #navigation .navbar:after { bottom: -10px; position: absolute; width: 0; height: 0; border-style: solid; border-color: transparent; }
#navigation .navbar:before { left: -10px; border-width: 0 10px 10px 0; border-right-color: #E15908; }
#navigation .navbar:after { right: -10px; border-width: 10px 10px 0 0; border-top-color: #E15908; }
#navigation .navbar .navbar-form {border-color:rgb(0, 0, 0);border-color:rgba(0,0,0,0.1);box-shadow:inset 0 1px 0 rgb(255, 255, 255), 0 1px 0 rgb(255, 255, 255);box-shadow:inset 0 1px 0 rgba(255,255,255,0.1), 0 1px 0 rgba(255,255,255,0.1)}}
#navigation .navbar-nav { color: #fff; font-size: 18px; letter-spacing: 1px; line-height: 40px; margin: 0; padding: 0 12px; position: relative; text-transform: uppercase; font-family: Oswald; font-weight: 400; font-style: normal;text-align: center; border: none !important; display: block; width: 100%; margin: 0 !important;}}
What can I do to make it work?
Thanks,
TomCustomer Support
Hi Tom,
Can you share the link to your GeneratePress site and can you share a link to a site where you have this code working? We’ll try to see what changes are needed to make it work.
Hi Fernando,
this is the site where I am using it already:
https://der-richtige-brotbackautomat.de/and on that site I would like to use the code mentioned before:
https://grill-profis.net/Thanks,
TomTry this:
nav#site-navigation .menu{text-align: center; border: none !important; display: block; width: 100%; margin: 0 !important; } nav#site-navigation .menu > li {float: none; display: inline-block; border: none !important } nav#site-navigation .menu > li a{ color: #fff; font-size: 18px; letter-spacing: 1px; line-height: 40px; margin: 0; padding: 0 12px; position: relative; text-transform: uppercase; font-family: Oswald; font-weight: 400; font-style: normal;text-align: center; border: none !important; display: block; width: 100%; margin: 0 !important; } nav#site-navigation .inside-navigation { background: #E15908 !important; box-shadow: -10px 0 0 #E15908, 10px 0 0 #E15908, 0 2px 12px 2px rgba(0, 0, 0, 0.25); z-index: 99; } nav#site-navigation .inside-navigation::before, nav#site-navigation .inside-navigation::after{ display: table; content: " "; bottom: -9px; position: absolute; width: 0; height: 0; border-style: solid; border-color: transparent; } nav#site-navigation .inside-navigation::before{ left: -9.5px; border-width: 0 10px 10px 0; border-right-color: #E15908; } nav#site-navigation .inside-navigation::after{ right: -9.5px; border-width: 10px 10px 0 0; border-top-color: #E15908 }Much appreciated Fernando!!
Is there any possibility to change font size and font type within the submenu without changing the font type oder the primary navigation menu?
Customer Support
Hi there,
in Customizer > Typography you can Add New typography and chose the
Primary Sub Menu itemstarget element. And now you can style it how you want.Hi David,
thanks for your answer. Since your colleague gave me the css code mentioned before that function does not work anywork. Can you please have a look?
ThanksCan you set the Navigation Width to Contained in Customizer > Layout > Primary Navigation.
Then I can take a closer look at the CSSI did.
If you edit the code to this:
nav#site-navigation .menu{text-align: center; border: none !important; display: block; width: 100%; margin: 0 !important; } nav#site-navigation .menu > li {float: none; display: inline-block; border: none !important } nav#site-navigation .menu > li a{ color: #fff; margin: 0; padding: 0 12px; position: relative; text-align: center; border: none !important; display: block; width: 100%; margin: 0 !important; } nav#site-navigation .inside-navigation { background: #E15908 !important; box-shadow: -10px 0 0 #E15908, 10px 0 0 #E15908, 0 2px 12px 2px rgba(0, 0, 0, 0.25); z-index: 99; } nav#site-navigation .inside-navigation::before, nav#site-navigation .inside-navigation::after{ display: table; content: " "; bottom: -9px; position: absolute; width: 0; height: 0; border-style: solid; border-color: transparent; } nav#site-navigation .inside-navigation::before{ left: -9.5px; border-width: 0 10px 10px 0; border-right-color: #E15908; } nav#site-navigation .inside-navigation::after{ right: -9.5px; border-width: 10px 10px 0 0; border-top-color: #E15908 }-wherein Font code are removed, the settings in Appearance > Customize > Typography mentioned by David should now work.
great, thanks again!
You’re welcome!
- You must be logged in to reply to this topic.
