[Resolved] Sticky secondary menu

[Ivan]

Hello,

1. Is it possible to make the Secondary menu Sticky?

2. I search for a solution to hide the Secondary menu on mobile but show the Links of the Secondary in primary (Only on Mobile) when switching back to Desktop version i need again both menus to be visible, any way to do this?

Thank you

[Leo]

Hi there,

1. Depending on your layout, you can try this:
https://generatepress.com/forums/topic/sticky-secondary-navigation/

2. You can create a slideout navigation that combines the menu items of both primary and secondary navigation and use it for mobile only.

Or use the hide-on-desktop class for those menu items you only want to show on mobile:
https://docs.generatepress.com/article/responsive-display/#using-our-hide-on-classes

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Ivan]

Thank you will try it now, i was searching the forum but didn’t find this Thread

[Ivan]

The Sticky menu is working now Thank you!

For my second question, I create a Slideout navigation for Mobile only, but my Site Design is Crashing, I use the Sider Theme from Site Libary. Maybe it has something to do with this?

[Leo]

Can you link me to your site?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Ivan]

Site is linked in first post.

>> Here my Custom CSS

/* GeneratePress Site CSS */ @media (min-width: 1000px) {
	body {
		padding: 40 40px 40px;
		margin-left: 0px;
	}

	.site-header {
		background-color: #222C3C;
		position: fixed;
		left: 0;
		top: 0;
		width: 300px;
		z-index: 100;
		height: 100%;
		overflow: auto;
		overflow-x: hidden;
		-webkit-backface-visibility: hidden;
		-webkit-overflow-scrolling: touch;
		transition: .1s ease;
	}
	
	.admin-bar .site-header {
		top: 32px;
	}
	
	.site-header .main-navigation li {
		float: none;
	}
}
 /* Dashboard theme */

.inside-header {
	display: flex;
  flex: 1;
  flex-direction: column;
  align-content: flex-start;
	padding: 5px 0px 50px 0px;
}

.main-navigation, .main-navigation ul ul {
    background-color: #222C3C;
    width: 100%;
	  text-align: left;
}

.main-navigation .main-nav ul li[class*="current-menu-"] > a {
    box-shadow: inset 3px 0 0 0 #00a8ff;
}

 /* Dashboard theme */

.site-branding,
.site-logo {
	order: 1;
	padding-top: 15px;
	border-style: hidden;
  border-top-width: 5px;
  border-top-style: solid;
  border-top-color: #00a8ff;
}

.header-widget {
	order: 3;
}

.nav-float-right .inside-header .main-navigation {
	order: 2;
	float: none;
	margin-top: 30px;
	margin-bottom: 50px;
}

.nav-float-right .header-widget {
	float: none;
	top: auto;
	max-width: 100%;
}

#menu-social-sider li {
	display: inline-block;
	margin: 0 10px;
}

.dropdown-click .site-header .main-navigation ul ul {
    position: relative;
}

a.button,
a.button:visited,
button,
input[type="submit"] {
	border-width: 1px;
	border-style: solid;
	border-color: inherit;
}

.mc4wp-form-fields input {
	margin-bottom: 10px;
	width: 100%;
	text-align: center;
}

.single .entry-header::after,
.page .entry-header::after{
    border-bottom: 1px solid #000;
    content: "";
    display: block;
    margin-bottom: 40px;
    padding-bottom: 40px;
    width: 2.5%;
}

.main-navigation.toggled .main-nav li {
	text-align: center !important;
}

::-webkit-input-placeholder { 	text-transform: uppercase;
	font-size: 14px;
}

::-moz-placeholder {
	text-transform: uppercase;
	font-size: 14px;
}

:-ms-input-placeholder {
	text-transform: uppercase;
	font-size: 14px;
}

:-moz-placeholder {
	text-transform: uppercase;
	font-size: 14px;
}

@media (max-width: 768px) {
	.separate-containers .site-main {
		margin-top: 20px;
		margin-bottom: 0;
	}
	
	.post {
		margin-bottom: 20px;
	}
	
	html:not(.mobile-menu-open) .header-widget {
		display: none;
	}
	
	.nav-float-right .inside-header .main-navigation {
		margin-top: 0;
	}
	
	.nav-float-right .inside-header .main-navigation:not(.toggled) {
		margin-bottom: 0;
	}
	
} /* End GeneratePress Site CSS */
	.inside-header {
		padding: 0px 0px 50px 0px;
	}

.secondary-navigation {
    border-style: hidden;
    border-top-width: 5px;
    border-top-style: solid;
    border-top-color: #00a8ff;
}

[Tom]

I’m not seeing the slideout navigation enabled?

Also, you have this:

body {
    padding: 40 40px 40px;
    margin-left: 0px;
}

It should be this:

body {
    padding: 40px 40px 40px;
    margin-left: 300px;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Ivan]

It is Enabled under the link i set in first post only the Home Page have a OptimizePress Theme.

I set the margin back to 300px

[Tom]

There’s a couple issues I’m seeing.

1.

This CSS is causing the button to display on two lines:

button span {
    border: 0;
    display: block;
    white-space: nowrap;
}

You should adjust it to be more specific to the span you’re trying to target.

2.

Add this CSS to fix the overlapping of menus:

.secondary-navigation.element-is-sticky {
    z-index: 999 !important;
}

I’m still not actually seeing the slideout navigation markup. You said it’s set to “Mobile only” in “Customize > Layout > Slideout Navigation”?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Ivan]

sorry it was not activated, now it is Mobile Only and and the design is Crashed.

[Tom]

You have this CSS:

.main-navigation, 
.main-navigation ul ul {
    background-color: #222C3C;
    width: 100%;
    text-align: left;
}

Replace it with this:

.main-navigation:not(.slideout-navigation), 
.main-navigation:not(.slideout-navigation) ul ul {
    background-color: #222C3C;
    width: 100%;
    text-align: left;
}

Also, be sure to add any custom CSS after the closing /* End GeneratePress Site CSS */ comment.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Ivan]

Now i know again why i was Changing margin-left: the from 300 to 0

	body {
		padding: 40 40px 40px;
		margin-left: 300px;
	}

Beceuse the Theme i use on Home Page from OptimizePress is not anymore full width like it was, becuese of the Custom CSS of GP.

Any way do do this not to affect OptimizePress Theme?

Thank you

[Tom]

I’m not really sure how you’re using two different themes on one website. The CSS on the GP site shouldn’t affect the home page if it’s using a different theme. Is it a different WP install? Or the same install with something weird going on to allow different themes?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Ivan]

It is same Install, the Plugin OptimizePress has an Option to give every created Page a own Design also build by OptmizePress Team (Landing Pages, Sales Pages…), the plugin is not using standard WP-themes only the one coming with the Plugin can be used.

[Tom]

Hmm ok. Replace:

body {
    padding: 40 40px 40px;
    margin-left: 300px;
}

With:

body:not(.op-live-editor-page) {
    padding: 40 40px 40px;
    margin-left: 300px;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Author]

Posts