[Resolved] Header/Primary Navigation help

Hi Fergal,

You can use primary navigation and secondary navigation to achieve this.
https://www.screencast.com/t/9svDtJf3gs

Set Primary navigation location to Float right, set secondary navigation location to Below header.

Enable the search in the Customizer > layout > primary navigation.

To add social icons as menu items, use custom link to add menu item, check the screenshot below:
https://www.screencast.com/t/YQjFrPCjlyx

You can find social icons on a website like this:
https://icons.getbootstrap.com/

After the structure is done, we can help you with some CSS to move the logo center/move the search to left.

Let me know 🙂

center blog title

.site-branding {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    z-index: 101;
}

Move search icon to left of the primary nav

.menu-bar-items {
    order: -1;
}
nav#site-navigation {
    width: 100%;
}
.inside-navigation.grid-container {
    width: 100%;
    justify-content: space-between;
}

Underline on hover for secondary nav

.secondary-navigation .main-nav ul li:hover, .secondary-navigation .main-nav ul li ul li:hover {
    text-decoration: underline;
}

Adjust font sizes for secondary nav

.secondary-navigation .main-nav ul li a, .secondary-navigation .main-nav ul li ul li a {
    font-size: 25px;
}

Bottom border lines for header and Secondary Nav

header#masthead {
    border-bottom: 1px solid #fdc086;
}

You may notice that 1 border is not full length, it’s because the header is not set to full, you can change the setting in customizer > layout > header.

Recommendation for Pinterest social icon URL?

You can try this site:
https://fontawesome.com/v5.15/icons/pinterest?style=brands

And here’s an video (start from 2:00) for you to learn how to get and optimize(optional) the html code from this site:
https://youtu.be/wdzFximLiQs?t=120

Let me know 🙂

The underline is working, can you please help me add a few pixels of space between the text and the underline?

That’s not underline can do, but we could try using a pseudo-element, so replace the underline CSS with this (I also added a transition effect, if you don’t want it, just simply remove the line of transition🙂

.secondary-navigation .main-nav ul li:hover:after, .secondary-navigation .main-nav ul li ul li:hover:after {
    right: 0;
    transition: 0.5s all ease;
}

.secondary-navigation .main-nav ul li:after, .secondary-navigation .main-nav ul li ul li:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    background-color: #fdc086;
    height: 1px;
    right: 100%;
}

The top border wasn’t full length like you mentioned, so I did set the inner header width to full, but then the border went away? Please help.

I edited this part of CSS here:
https://generatepress.com/forums/topic/header-primary-navigation-help/#post-1806538

pinterest SVG icon

I copied the SVG code from Generateblocks, you can have a try here:
<svg aria-hidden="true" role="img" height="1em" width="1em" viewbox="0 0 496 512" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M496 256c0 137-111 248-248 248-25.6 0-50.2-3.9-73.4-11.1 10.1-16.5 25.2-43.5 30.8-65 3-11.6 15.4-59 15.4-59 8.1 15.4 31.7 28.5 56.8 28.5 74.8 0 128.7-68.8 128.7-154.3 0-81.9-66.9-143.2-152.9-143.2-107 0-163.9 71.8-163.9 150.1 0 36.4 19.4 81.7 50.3 96.1 4.7 2.2 7.2 1.2 8.3-3.3.8-3.4 5-20.3 6.9-28.1.6-2.5.3-4.7-1.7-7.1-10.1-12.5-18.3-35.3-18.3-56.6 0-54.7 41.4-107.6 112-107.6 60.9 0 103.6 41.5 103.6 100.9 0 67.1-33.9 113.6-78 113.6-24.3 0-42.6-20.1-36.7-44.8 7-29.5 20.5-61.3 20.5-82.6 0-19-10.2-34.9-31.4-34.9-24.9 0-44.9 25.7-44.9 60.2 0 22 7.4 36.8 7.4 36.8s-24.5 103.8-29 123.2c-5 21.4-3 51.6-.9 71.2C65.4 450.9 0 361.1 0 256 0 119 111 8 248 8s248 111 248 248z"></path></svg>

Let me know 🙂

Can we get the transition line to be the length of the word and get the line a bit closer to the word

Replace the previous one with this one, you can adjust the number of bottom/left/right.

.secondary-navigation .main-nav li a {
    display: inline-block;
}
.secondary-navigation .main-nav ul li:hover > a:after, .secondary-navigation .main-nav ul li ul li:hover > a:after {
    right: 0;
    transition: 0.5s all ease;
}
.secondary-navigation .main-nav ul li > a:after, .secondary-navigation .main-nav ul li ul li > a:after {
    content: "";
    position: absolute;
    bottom: -2px;
    left: 10px;
    background-color: #fdc086;
    height: 1px;
    right: 100%;
}

Do you remember what the CSS was for the secondary nav bottom border?

It’s this 🙂

nav#secondary-navigation {
    border-bottom: 1px solid #fdc086;
}

How can I adjust the height of the icons

Since they are menu items of primary navigation, you should be able to adjust the font size at: Customizer> Typography > Primary Navigation.