[Support request] How to Modify Navigation Block

[Blake]

I have a sticky navigation setup to appear above the header which overlaps the top of it. Since the navigation menu appears at the top and scrolls with the page I need to add additional text, social icons etc to it for the user to see as the scroll through the page. Below is a visual representation of what I am looking to accomplish within the nav tag:

View post on imgur.com

From the picture I have four DIVs. The Container Div, Image logo Div, Text/Social Icons Div, and Primary Navigation meny Div. How can I incorporate this layout while maintaining the responsiveness of the blocks and navigation styling? Also is it possible to setup the <nav> so it appears within the <header> instead of outside it? Having issues figuring out how to best format the html for optimal SEO/load time.

Here is something similar another member posted, https://generatepress.com/forums/topic/navigation-in-header-or/, http://artwolfe.com/. If I could add on a div above the site navigation to add the text and social icons I believe that would accomplish what I am looking to achieve.

[Leo]

Hi Blake,

For the image you could consider just using the navigation logo:
https://docs.generatepress.com/article/navigation-logo/

Or you could try the generate_inside_navigation hook:
https://docs.generatepress.com/article/generate_inside_navigation/

For the block above the menu items, you can use the built in grid system, something like this:
<div class="grid-33 tablet-grid-50 mobile-grid-100">
Quick example: https://generatepress.com/forums/topic/logo-search/#post-316731

Other useful classes that might come in handy: hide-on-desk hide-on-tablet hide-on-mobile

Let me know if you need more info 🙂

[Blake]

There appears to be a CSS conflict / other theme styling causing issues here. Firebug is showing these CSS styling selectors for #primary-menu:

a, abbr, acronym, address, applet, big, blockquote, body, caption, cite, code, dd, del, dfn, div, dl, dt, em, fieldset, font, form, h1, h2, h3, h4, h5, h6, html, iframe, ins, kbd, label, legend, li, object, ol, p, pre, q, s, samp, small, span, strike, strong, sub, sup, table, tbody, td, tfoot, th, thead, tr, tt, ul, var

When I change all of those properties to float right the text block, social icons, and primary-menu appear to the side (right) of the navigation logo. If I set float right directly to #primary-menu, it shows the menu listings aligned right below the navigation logo on a new line rather than along side it.

Which CSS selectors do I target and what operations do I encode to achieve the desired appearance listed above?

[Leo]

Not sure what you mean? You can add as many classes as you want in the div and just target them.

So something like this:
<div class="some-custom-class grid-33 tablet-grid-50 mobile-grid-100">

then style it:

.some-custom-class {
    text-align: center;
}

[Blake]

This is the default CSS generated by Generatepress that is causing my issue:

.clear::after, .clear::before, [class*=”content”]::after, [class*=”content”]::before, [class*=”site”]::after, [class*=”site”]::before {
content: “”;
display: table;
}

When content and display is disabled the text and navigation items then appear to the right of the logo image. By default it causes the menu items to appear below and to the right of the logo image.

Here is a visual example. The first image is the correct one, the second is what happens be default with the content and display styling is used.

View post on imgur.com

How can I fix this issue without assigning display none to all the CSS selectors above? Ideally I would like to isolate the individual selector that is causing the menu items to shift below.

[Blake]

In addition, I am awaiting comment on how to accomplish this task:

“Also is it possible to setup the <nav> so it appears within the <header> instead of outside it? Having issues figuring out how to best format the html for optimal SEO/load time.

Here is something similar another member posted, https://generatepress.com/forums/topic/navigation-in-header-or/, http://artwolfe.com/. If I could add on a div above the site navigation to add the text and social icons I believe that would accomplish what I am looking to achieve.”

[Leo]

Sorry I’m not exactly sure what issues you are having and why those classes would cause an issue.

Have you added anything in generate_inside_navigation hook yet? This would allow you to add a div above navigation.

If you want the navigation inside the header, you could try using Float Right in navigation location:
https://docs.generatepress.com/article/navigation-location/

Can you provide a link to your site and show us what you have so far? An actual example of what you are trying to accomplish might be helpful too 🙂

[Blake]

“Have you added anything in generate_inside_navigation hook yet? This would allow you to add a div above navigation.”

I used the above hook to add text div above the navigation content. This has its draw backs though because it only places code above the navigation. There is a good possibility on another site I will need to place code within the navigation and below the links.

“If you want the navigation inside the header, you could try using Float Right in navigation location:
https://docs.generatepress.com/article/navigation-location/&#8221;

This is a nice solution for page specific navigation layouts but it does not specify how to place the navigation tag inside header tag. It instead places it above, below etc. I have already added float right to .main-nav and text div class above the navigation links to properly float these items.

Again this is the default CSS generated by Generatepress that is causing my issue:

.clear::after, .clear::before, [class*=”content”]::after, [class*=”content”]::before, [class*=”site”]::after, [class*=”site”]::before {
content: “”;
display: table;
}

By default it causes the menu items to appear below and to the right of the logo image. Once display is changed to none for all the above CSS selectors it then displays the correct layout. This is problematic because I only want to set display none to the CSS selector that requires the change.

[Tom]

Is there any way you can link me to the page where that CSS is causing the conflict? In theory, it shouldn’t, but I would have to actually see it to see the reason.

[Blake]

I replicated the issue to modifieddna.net from my location installation. With the previous comment on the CSS conflict it appears it was Beaver Builder code. I have since removed the short code to that template and added a div through a hook instead.

Here is the breakdown of the issues:

1. <nav> contents should appear within the <header> code. Currently, the navigation code is outside the header tag. Visually, the placement of the sticky navigation is displaying correctly.

2. “Call US Text here” is outside #primary-menu div. I was looking to place it above the menu items without increasing the #inside-navigation height.

So in summary I am trying to accomplish a similar layout and responsiveness of http://artwolfe.com/, but with an additional div above the menu items for a phone number , email etc.

[Tom]

You could recreate that layout quite easily using the GP navigation: https://docs.generatepress.com/article/navigation-logo/#navigation-as-header

Then you could use the top bar widget area for the additional div above.

[Blake]

Thank you for the suggestion but I am afraid this is not a solution to my problem. Maybe there is something you are implying that is not clear. When adding content to the Top bar widget the text/code appears outside of the navigation tag. The information here, https://docs.generatepress.com/article/navigation-logo/#navigation-as-header, advises to hide the header which is unrelated to formatting the navigation block. In addition, none of these solutions move the navigation tag within the header tag.

Can you please be more specific as I have described this issue in much detail and am hoping for a comprehensive answer.

Is it possible to filter out the default navigation and move it to the top of the header using the hook generate_before_header_content? If so this would allow me to add the divs needed to add the logo, text block, and social icons. It would also put the navigation within the header tag.

What are your thoughts?

[Tom]

If you set the navigation location to float left or right, it will insert it into the header as you’re needing. You’ll then likely need to use CSS to stop the floating of the navigation (depending on the look you’re going for).

If that doesn’t get you where you need to go just let me know and I’ll review your posts again to see if I’m missing something really obvious.

[Blake]

This took quite a bit of work to figure out how achieve the look described with the basic support provided. For others that are looking to achieve a similar sticky navigation menu I used the code and options below:

Generate Press Options

Menu Item Height, 97px

Navigation Location, Float left or right does not matter, this option moves <nav> into <header> as Tom mentioned

Custom CSS

.callus {display:inline; padding: 10px 20px 10px 200px;}

.socialicons {display:inline;padding: 10px 20px 10px 20px;}

.main-nav {float:right;padding-right:300px;}

.nav-float-left .inside-header .main-navigation {float:none;}

#site-navigation {width:100%; padding: 10px 0 20px;}

.main-navigation .main-nav ul li a {
line-height: 40px;}

Custom Functions

Imports javascript file for sticky nav

add_action( ‘wp_enqueue_scripts’, ‘generate_child_scripts’ );
function generate_child_scripts() {

wp_enqueue_script( ‘stickynav’, get_stylesheet_directory_uri() . ‘/js/scripts.js’, array(), GENERATE_VERSION, true );

}

Adds two Divs into Navigation Block

add_action( ‘generate_inside_navigation’,’addnavshortcode’ );
function addnavshortcode() {
?>

Call Us Text here

Social Icons Here

<?php
}

Javascript

jQuery(document).ready(function($) {

if ( ! jQuery(‘#site-navigation’)[0] )
return;

var stickyNavTop = jQuery(‘#site-navigation’).offset().top;

var stickyNav = function(){
var scrollTop = jQuery(window).scrollTop();

if (scrollTop > stickyNavTop) {
jQuery(‘body’).addClass(‘stickynav’);
} else {
jQuery(‘body’).removeClass(‘stickynav’);
}
};

stickyNav();

jQuery(window).scroll(function() {
stickyNav();
});
});

Styling for Javascript

/* Top Navigation */

.admin-bar.stickynav.nav-below-header #site-navigation,
.admin-bar.stickynav.nav-float-right #site-navigation,
.admin-bar.stickynav.nav-above-header #site-navigation,
.admin-bar.nav-below-header #site-navigation,
.admin-bar.stickynav.nav-float-right,
.admin-bar.nav-above-header #site-navigation {
top: 32px;
}
.stickynav.nav-below-header #site-navigation,
.stickynav.nav-float-right #site-navigation,
.stickynav.nav-above-header #site-navigation {
border-top: 0 none;
position: fixed;
top: 0;
width: 100%;
max-width: 100%;
z-index: 100;
opacity: .8;
-webkit-transition:opacity 0.2s ease-in-out;
-moz-transition:opacity 0.2s ease-in-out;
-o-transition:opacity 0.2s ease-in-out;
transition:opacity 0.2s ease-in-out;
}
.stickynav.nav-below-header #site-navigation:hover,
.stickynav.nav-float-right #site-navigation:hover,
.stickynav.nav-above-header #site-navigation:hover {
opacity: 1;
-webkit-transition:opacity 0.2s ease-in-out;
-moz-transition:opacity 0.2s ease-in-out;
-o-transition:opacity 0.2s ease-in-out;
transition:opacity 0.2s ease-in-out;
}

.nav-above-header #site-navigation {
border-top: 0 none;
position: fixed;
top: 0;
width: 100%;
max-width: 100%;
z-index: 100;
-webkit-transition:opacity 0.2s ease-in-out;
-moz-transition:opacity 0.2s ease-in-out;
-o-transition:opacity 0.2s ease-in-out;
transition:opacity 0.2s ease-in-out;
}

.nav-float-right #site-navigation {
border-top: 0 none;
position: fixed;
top: 0;
width: 100%;
max-width: 100%;
z-index: 100;
-webkit-transition:opacity 0.2s ease-in-out;
-moz-transition:opacity 0.2s ease-in-out;
-o-transition:opacity 0.2s ease-in-out;
transition:opacity 0.2s ease-in-out;
}

Notice the float-right classes. Those were added since float right was selected in GeneratePress for the Navigation Location. Other code left for future options.

[Blake]

Now I have one final task to complete this sticky navigation menu.

Here is what I have currently:

View post on imgur.com

This is how it should appear:

View post on imgur.com

The styling for the grid-container class causes the full width, contained content, not to display correctly. If I remove that styling I get the layout in the second picture.

<header id="masthead" class="site-header" itemtype="http://schema.org/WPHeader" itemscope="itemscope">
<div class="inside-header grid-container grid-parent">

What is the best way to solve this issue? Remove grid-container from,

? If so, specifically, how would I do this without modifying the core themes css? If there is a better option to resolve this problem then please provide details to the solution.

[Author]

Posts