[Resolved] Primary navigation design

[Mehmet Akif Kaban]

Hello
I want to use primary navigation with my site logo. Everything seems ok until I upload the logo to primary navigation.when I upload the image the height of navigation bar increases out of control( you can see the increased amount when you get the cursor over the menu element)

Also I don’t want the header. Is there a way to globally hide it ? What I do is remove top and bottom paddings to zero so that header is hidden. Is this the true way?

Thanks

[Leo]

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 🙂

[Mehmet Akif Kaban]

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

[Leo]

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

[Mehmet Akif Kaban]

Thanks That solved my problem!

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

[Leo]

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

Glad it’s solved 🙂

[Mehmet Akif Kaban]

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

[David]

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.

[Mehmet Akif Kaban]

Thanks,
That CSS affects my site now or no?

[David]

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.

[Author]

Posts