Archived topic

modifying navigation bar

12 replies · Started by tom0386 on March 23, 2023

Viewing posts 1–13 of 13

March 23, 2023 at 1:07 am #2578212

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,
Tom

March 23, 2023 at 1:13 am #2578222

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.

March 23, 2023 at 1:21 am #2578234

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,
Tom

March 23, 2023 at 1:36 am #2578251

Try 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
}

March 23, 2023 at 1:44 am #2578268

Much appreciated Fernando!!

March 23, 2023 at 2:06 am #2578313

Is there any possibility to change font size and font type within the submenu without changing the font type oder the primary navigation menu?

March 23, 2023 at 6:13 am #2578650

Hi there,

in Customizer > Typography you can Add New typography and chose the Primary Sub Menu items target element. And now you can style it how you want.

March 23, 2023 at 8:42 am #2578991

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?
Thanks

March 23, 2023 at 3:32 pm #2579467

Can you set the Navigation Width to Contained in Customizer > Layout > Primary Navigation.
Then I can take a closer look at the CSS

March 24, 2023 at 12:04 am #2579816

I did.

March 24, 2023 at 12:16 am #2579826

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.

March 24, 2023 at 12:47 am #2579859

great, thanks again!

March 24, 2023 at 12:53 am #2579871

You're welcome!

This archived topic is closed to new replies.

Start building better websites today.