[Resolved] Header/Primary Navigation help

[Fergal]

Hey there,

Can you please tell me how to create a header/navigation like this one: https://lovesweatfitness.com/

Desired layout as follows
Top Bar: search icon Blog Title Social Media Icons
Primary Navigation (centered): categories blog page

Thanks,
Fergal

[Ying]

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 🙂

[Fergal]

Hey Ying,

Thanks so much for your help! I followed your steps and it is coming along nicely (tonedpeach.com).

Can you please help me with what I have left:

• Please help to center blog title
• Move search icon to left of the primary nav (left of blog title)
• Underline on hover for secondary nav (both parent and sub-menu items)
• Adjust font sizes for secondary nav
• Bottom border lines for header and Secondary Nav
• Recommendation for Pinterest social icon URL?

Thanks,
Fergal

[Ying]

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 🙂

[Fergal]

Thanks again Ying, we are getting there!

• The underline is working, can you please help me add a few pixels of space between the text and the underline?
• 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 watched the video you shared and downloaded the pinterest SVG icon from fontawesome.com. It looks like the icon is there in the source code, but the color scheme isn’t working for it. Please help

Regards,
Fergal

[Ying]

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 🙂

[Fergal]

Hey Ying,

I love the line transition effect! Can we please make a couple adjustments to it? Can we get the transition line to be the length of the word and get the line a bit closer to the word?

Thanks for your recommendation for the header bottom border. It worked! But, I accidentally wrote over the CSS for the secondary nav bottom border. So sorry! Do you remember what the CSS was for the secondary nav bottom border?

Great thinking to get the pinterest icon from Generate Blocks! How can I adjust the height of the icons? I tried the following, but it didn’t work:
#menu-item-2028 {
font-size: 20px;
}

ul#menu-primary-navigation.menu.sf-menu {
font-size: 20px;
}

Thanks Ying

[Ying]

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.

[Fergal]

Thanks Ying! All your edits worked!

The only piece I’m still hoping to get sorted is for the transition line to fit the length of the word. Adjusting the right/left by pixel or percentage don’t really work since the words are various lengths and the drop down div is much wider than the secondary nav parent elements. The red box here https://codepen.io/srirachachacha/pen/pNyQoY is pretty close, but I’m not sure how to implement it. Is there anything left we can try?

I just checked the mobile header and it now shows two menus. For the mobile, it almost looks like I want the secondary menu to be the primary menu. Can you please advise if this is a simple fix with some sort of mobile menu or how do we handle this part?

Thanks for all your help!

Regards,
Fergal

[Fergal]

To clarify, I like how the transition line comes from the left and ends at the right. I’m just hoping we can get it to start and end with the word in the menu. Left: 18px handles the left side.

[Elvin]

Hi Fergal,

I’ve modified the CSS to match the codepen you’ve want to replicate.

Try this:

.secondary-navigation .main-nav ul li a:after, .secondary-navigation .main-nav ul li ul li a:after{
    bottom: 5px; 
    height: 2px; 
    width: 0%;
    left: 50%;
    transform: translateX(-50%);
    background-color: red;
    transition: 0.5s ease all .3s;
    content: "";
    position: absolute;
}

.secondary-navigation .main-nav ul li a, .secondary-navigation .main-nav ul li ul li a{
    position: relative;
}

.secondary-navigation .main-nav ul li:hover a:after, .secondary-navigation .main-nav ul li ul li:hover a:after{
  width: 60%;
  transition: 0.3s ease all;
}

Adjust width: 60%; to your preference.

But if you really must do it where the line starts at the beginning of the word, we may have to replace the menu item’s padding with margin. The background will be compressed to start at the beginning of the word as well though.

[Fergal]

Thanks Elvin! Your solution is really close, but it’s really the dropdown for the subcategories that is causing a problem since the container sizing is much bigger. Ying’s solution is great so we can end the work on the desktop header now.

Can ya’ll please help me with the mobile header now? It now shows two menus. For the mobile, it almost looks like I want the secondary menu to be the primary menu. Can you please advise if this is a simple fix with some sort of mobile menu or how do we handle this part?

[Elvin]

If I may suggest, it’s best to hide the secondary menu on mobile.

Here’s the CSS to do it:

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

[Fergal]

Thanks Elvin your recommendation and using the mobile menu for the Off Canvas Menu works really well! We are almost done! I believe my last issue is the blog title on the mobile isn’t centered even though in Customizing > Layout > Header > header alignment is set to center. Earlier in this thread, I needed to center the blog title and Ying helped me with the following code:

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

Which worked nicely for the desktop, but is it interfering with the mobile view?

Thanks,
Fergal

[Fergal]

Hmm, it also seems on mobile, that after tapping the search icon, the beginning of the search box is hidden behind the “X”. Can you please help fix this?

Screenshot of Search Behavior

Thanks,
Fergal

[Author]

Posts