Are you a GenerateCustomer?

Do you have an active GP Premium or GenerateBlocks Pro license key?

Create a GenerateSupport account for GeneratePress and GenerateBlocks support in one dedicated place.

Create an account
Already have a GenerateSupport account? Login

Just browsing?

Feel free to browse the forums. Support for our free versions is provided on WordPress.org (GeneratePress, GenerateBlocks).

Want to become a premium user? Learn more below.

Adjusting header element locations

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

  • Hi there,

    Is your current header layout using custom CSS? Also, can you share what settings you currently have under Customize > Layout > Header?

  • 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*/
    }
    }
  • 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;
    }
    }
  • 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;
    }
    }
Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.