Clearing content inserted with generate_before_navigation action

  • I want to add social media icons just above the navigation menu, but don’t want to add those icons in the Top Bar widget. The reason is because I have the myStickyMenu plugin set up to make content inside the #masthead ID stick — adding the icons to the Top Bar widget would be outside the #masthead ID, and would not stick when scrolling.

    The problem is that when I add a placeholder DIV for these social media icons using the “generate_before_navigation” action (in my child theme’s functions.php file,) the resulting output gets placed between the logo and the navigation menu.

    Here’s a screenshot…
    https://a3q.179.myftpupload.com/wp-content/uploads/generate_before_navigation-not-on-its-own-line-above-menu.jpg

    …which may also be seen here:
    https://a3q.179.myftpupload.com

    In short, I want to move the red arrow content to where the green arrow is pointing (both noted in the screenshot.)

    I gave this social media icons DIV a “socialLinks” class, then tried to “clear” after it (by targeting the socialLinks class with custom CSS) so the navigation menu is on its own line below this DIV (where the green arrow is in the screenshot.) I wasn’t able to clear the menu to a new line. I want this generate_before_navigation action content to go above the navigation menu on its own line (and flushed right) in desktop, tablet, and mobile responsive widths.

    What CSS should I use to do this?

    Thank you.

Viewing 6 replies - 1 through 6 (of 6 total)

  • Hi @michaelb428ping,

    Try to inject it through generate_inside_navigation action hook first.

    Then, you can do flex column on the inside_navigation div.

    Thread Starter michaelb428ping

    (@michaelb428ping)

    Hello Fernando,

    That worked, thank you!

    However as a result of doing that, the navigation menu moved to the left a little. How can I get the navigation menu back to be aligned/floated right again?

    https://a3q.179.myftpupload.com/

    I’m using the following custom CSS for desktop/tablet responsive width:

    .site-logo {
	display: inline-block !important;
}

.home .entry-header {
	/* hide H1 on home */
	display: none;
}

/* for myStickymenu plugin */
.home #mysticky-nav .site-header {
	z-index: 10;
}

@media screen and (min-width: 801px) {
/* desktop width */

	.socialLinks {
		width: 100%;
		display: flex !important;
		flex-direction: column;
		flex-wrap: wrap;
		float: right !important;
		text-align: right !important;
	}

}

@media screen and (min-width: 768px) and (max-width: 800px)  {
/* tablet width */
	
	/* logo position fix */
		.site-header .inside-header {
			flex-direction: row;
		}
	
	.socialLinks {
		width: 100%;
		display: flex !important;
		flex-direction: column;
		flex-wrap: wrap;
		float: right !important;
		text-align: right !important;
	}
	
}

    Thank you.

    Thread Starter michaelb428ping

    (@michaelb428ping)

    Oops, I left out the “logo position fix” css for desktop width. Here it is again:

    .site-logo {
	display: inline-block !important;
}

.home .entry-header {
	/* hide H1 on home */
	display: none;
}

/* for myStickymenu plugin */
.home #mysticky-nav .site-header {
	z-index: 10;
}

@media screen and (min-width: 801px) {
/* desktop width */

	/* logo position fix */
		.site-header .inside-header {
			flex-direction: row;
		}

	.socialLinks {
		width: 100%;
		display: flex !important;
		flex-direction: column;
		flex-wrap: wrap;
		float: right !important;
		text-align: right !important;
	}

}

@media screen and (min-width: 768px) and (max-width: 800px)  {
/* tablet width */
	
	/* logo position fix */
		.site-header .inside-header {
			flex-direction: row;
		}
	
	.socialLinks {
		width: 100%;
		display: flex !important;
		flex-direction: column;
		flex-wrap: wrap;
		float: right !important;
		text-align: right !important;
	}
	
}

    Thank you.

    Leo

    (@leohsiang)

    This should help:

    .main-navigation .inside-navigation {
    justify-content: flex-end;
}

    Please allow me to mention that the purpose of this support forum is to help with questions related to the features of the free theme and not to provide custom CSS for your special requirements.

    Thanks ??

    Thread Starter michaelb428ping

    (@michaelb428ping)

    Hello Leo,

    That fixed the menu!

    Thank you for your help, it’s much appreciated.

    Michael

    Leo

    (@leohsiang)

    No problem ??

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Clearing content inserted with generate_before_navigation action’ is closed to new replies.