[Support request] How to set primary navigation location in center

[Immi]

How to set primary navigation length location in center/ reduce length of primary nav size 1 inch or 2 inch from both side right & left. i means primary nav fix in centerd of page layout.
please heplp

[Leo]

Hi there,

You can set the alignment here:
https://docs.generatepress.com/article/navigation-layout/#navigation-alignment

Then reduce the size of navigation with this CSS:

body .main-navigation.grid-container {
    max-width: 800px;
}

Adding CSS: https://docs.generatepress.com/article/adding-css/

[Immi]

Thank You

[Leo]

No problem.

[Immi]

Hi There,

the size which is decrease of navigation that’s background color changed appear body Background Color but i want white white color #ffffff like this screen shot please have a look **

2) i’m using search bar in header which is looking good in desktop device. but not in mobile device
width spread how to reduce width of search bar box in mobile device with search bar button

3) I am Using on Right sidebar Image Widget with fb logo link. i want to disable it on mobile device
Thank You

[Leo]

Try this CSS for #1:

.inside-navigation {
    margin-left: 20px;
    margin-right: 20px;
}
.main-navigation {
    background-color: #fff;
}
.main-navigation .main-nav li a {
    background-color: #93b874;
}

Any chance you can open new topics for 2 and 3 as they aren’t related this this topic?

Thanks!

[Immi]

hi Leo, #1:CSS not working proprly i have also tried change figured of margin-right: 20px; Nothing happened like I want. primary navigation width shrink more from right side but left side is enough i want both equal. like this attached screen capture attached here. **
My site link **

Thank You

[Leo]

Scratch the CSS idea.

Try this PHP snippet instead:

add_action('after_setup_theme','lh_change_nav_position');
function lh_change_nav_position()
{
      remove_action( 'generate_after_header', 'generate_add_navigation_after_header', 5 );
      add_action( 'generate_after_header_content', 'generate_add_navigation_after_header', 29 );
}

[Immi]

Hello Leo,
Thank you very much for your help, I really appreciate it. I have another question.
i am Using one widgets in right sidebar. but I want it only for Desktop.,when i switch on mobile device right sidebar widget showing above footer. how Can I hidden widget there.
I tried with this CSS code Below but its not working for me
**

@media (max-width: 768px) {
.widget .sidebar {
display: none;
}
}

[Leo]

No problem!

I’ve answered the other question in the other topic you opened.

[Author]

Posts