Primary navigation design

Hi there,

I believe this article should answer your questions:
https://docs.generatepress.com/article/navigation-as-a-header/

Let me know if this helps :)

Thanks I disabled global headers but I still have the issue of out of control increment of the primary navigation bar. You can check my website

Not sure what you mean by

out of control increment of the primary navigation bar

but maybe remove this CSS you've added?

.site-logo {
    order: -1;
    margin-bottom: 10px;
}

Thanks That solved my problem!

But I am not sure if I added it? My customization adds those codes to there?

That CSS isn't added by default or any customizations through the customizer.

Glad it's solved :)

Hello Leo,
Thnks for the help
When I look at css section I found lots of codes.
Are these CSS added by me through customizer?

/* GeneratePress Site CSS */ @media (min-width: 1025px) {
.home-intro {
margin: 10px 200px;
}
}

.lsi-social-icons li a, .lsi-social-icons li a:hover {
padding: 10px 5px 0px 5px !important;
background: transparent !important;
}

.topbar {
padding: 6px 0px 4px 0px;
}

@media( max-width: 768px ) {
#lsi_widget-2 {
display: none;
}
}

.main-navigation .menu > .menu-item > a::after {
content: "";
position: absolute;
right: 50;
left: 50%;
top: 0px;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
display: block;
width: 0;
height: 2px;
background-color: currentColor;
transition: 0.3s width ease;
}

.main-navigation .menu > .menu-item > a:hover::after,
.main-navigation .menu > .menu-item > a:focus::after,
.main-navigation .menu > .current-menu-item > a::after{
width: 30px;
}

.main-navigation .main-nav ul li a, .menu-toggle, .main-navigation .mobile-bar-items a {
text-align: center;
}

.main-navigation a {
letter-spacing: 2px;
}

#generate-slideout-menu {
padding-top: 20px;
}

.hero-title {
font-size: 40px;
letter-spacing: 4px;
}

@media (max-width: 768px) {
.hero-title {
font-size: 32px;
letter-spacing: 2px;
}
}

.mobile-header-navigation {
padding: 8px 5px;
}

.menu-toggle {
font-size: 20px;
}

h1 {
letter-spacing: 2px;
}

input[type="button"], input[type="reset"], input[type="submit"], a.button, a.button:visited {
line-height: inherit;
border-radius: 6px;
transition: all 0.5s ease 0s;
margin-top:10px;
}

h2.widget-title {
letter-spacing: 2px;
}

.inside-footer-widgets {
text-align: center;
}

.inside-page-hero .smooth-scroll {
position: absolute;
bottom: 20px;
}

.page-hero {
position: relative;
} /* End GeneratePress Site CSS */
.inside-header {
display: flex;
flex-direction: column;
}

Hi there,

that CSS would have been added when you installed a Site for the Site Library. They are part of the customisations the designer built in.

Thanks,
That CSS affects my site now or no?

Looks like you have made quite a few changes to the original Site Library. Easiest way to tell is to remove the CSS and see if you notice any changes. Paste it into a text editor for safe keeping inc case you need to add it back.