-
BeetsandBytes
Hello. I am wanting to change the website header elements to match the shared image below.
The layout would be logo > social media icons widget > site title > navbar buttons.I am wondering the best way to do this? I could potentially write everything up with html/css but perhaps I can just accomplish this flow of header elements by adjusting the generatepress settings?
Thank you,
-
Alvind
Hi there,
Is your current header layout using custom CSS? Also, can you share what settings you currently have under Customize > Layout > Header?
-
BeetsandBytes
Hi Alvind,
Yes there is some CSS but I assume it would need to change to match the layout I wanted. I pasted that below.
And here is a link to those layout header settings: https://imgur.com/a/xdaV87S
Thanks for any help!
@media(min-width: 769px) {
.inside-header>.site-branding,
.inside-header>.navigation-branding,
.inside-header>.site-logo,
.site-branding-container,
#site-navigation .navigation-branding .site-logo,
#sticky-navigation .navigation-branding {
position: absolute;
left: 50%;
transform: translateX(-50%);
z-index: 1000;
}#site-navigation {
margin-left: unset !important;
display: flex;
}.site-header .main-navigation:not(#sticky-navigation) .inside-navigation {
margin: unset;
}#site-navigation,
#primary-menu,
.main-navigation .inside-navigation {
flex: 1;
}/* Change nth-child(#) to first item to right */
.main-navigation ul li:nth-child(3) {
margin-left: auto;
}
}.inside-header {
padding-top: 50px;}
.site-header .header-image {
margin-top: 100px;
}.site-header {
border-image: linear-gradient(#ffffff, #2a5d1b) 80;
border-bottom-style: solid;
border-bottom-width: 12px;
background-image: linear-gradient(#c83a85 20%,#ffffff 99%);
}@media (min-width:769px) {
.main-navigation .main-nav ul li.nav-button a {
background-color: rgba(198, 94, 148, 0.28)above;
border: 2px solid rgba(255, 255, 255, 0.78);
color: #ffffff;
border-radius: 10px;
line-height: 35px; /*this number will likely need to be adjusted*/
}
}#menu-item-38 {
display: none;
}#menu-item-67 {
display: none;
}#menu-item-35 {
padding-right: 15px;
}#menu-item-66 {
padding-left: 15px;
}.lsi-social-icons li a {
background: rgba(255, 255, 255, 0) !important;
}.lsi-social-icons li a:hover {
background: rgba(255, 255, 255, 0) !important;
} -
Can you remove all the CSS that is related to navigation or header except the ones below for border?
.site-header { border-image: linear-gradient(#ffffff, #2a5d1b) 80; border-bottom-style: solid; border-bottom-width: 12px; background-image: linear-gradient(#c83a85 20%,#ffffff 99%); } @media (min-width:769px) { .main-navigation .main-nav ul li.nav-button a { background-color: rgba(198, 94, 148, 0.28)above; border: 2px solid rgba(255, 255, 255, 0.78); color: #ffffff; border-radius: 10px; line-height: 35px; /*this number will likely need to be adjusted*/ } }
-
BeetsandBytes
Hello Ying, I have removed all the CSS except those snippets.
Thank you.
-
Now add this CSS:
@media(min-width: 769px) { .site-logo { order: -20; margin-bottom: -80px; z-index: 100; } nav#site-navigation { margin-left: auto; margin-right: 0 !important; } .header-widget { padding-left: 40px; } }
-
BeetsandBytes
Thank you Ying. What would be the best way to arrange the text widget I have on the header so that it doesn’t appear below the social icons, I wanted it on the right side instead?
Thanks
-
Change the CSS to this:
@media(min-width: 769px) { .site-logo { order: -20; margin-bottom: -80px; z-index: 100; } nav#site-navigation { margin-left: auto; margin-right: 0 !important; } .header-widget { padding-left: 40px; display: flex; align-items: center; } }
- You must be logged in to reply to this topic.