[Resolved] Sticky secondary menu

[Ivan]

First of all Thank you Tom & Leo now it works!

Sorry for asking in this Post i can create a new Post if needed.

I test the Sider theme on small Laptop/Monitor sizes and the Blog Posts are not Responsiv, any way to fix this?

https://gyazo.com/f16a2a2777101264d8831313069eaded

or

https://feedigy.com/blog/

[Tom]

Hmm, perhaps try this CSS instead: https://generatepress.com/forums/topic/sticky-secondary-menu-2/#post-560215

[Ivan]

Thank you!! I would like to know how manny years it takes to be so good in CSS like you and Leo…..Awsome Work & Support

Thank you!

[Tom]

Glad I could help 🙂

[Ivan]

Hello Tom, You Helped me a while ago fixing the problem on My Front Page where i use a OptimizePress Theme! The problem was i used

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

To fix the white space on the Left side, you give me this code to fix it.

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

This worked very well but i switch now from the Sider Theme to the Navigator theme and here it seems the code you give me don’t work anymore. Here my Actuall CSS with the Navigator theme. The Website link is in the first Post, Hope anyone can help me fix the white space on the frontpage without destroying GP. Thank you

/* GeneratePress Site CSS */ /* ==========================

CUSTOM STYLING BY FLINT SKIN
Style: Navigator
https://flintskin.com
Author: David Beckwith
davd.beckwith@flintskin.com
Created: 18/02/2018

=========================== */

/* ------
Typography
------- */

blockquote {
	background: #fff;
	padding: 60px;
	border-radius: 10px;
}

hr {
    margin: 60px 0;
}

.contained-content {
	max-width: 800px;
	margin: auto;
	text-align: center;
}

/* ------
Buttons
------- */
button, html input[type="button"], input[type="reset"], input[type="submit"], a.button, a.button:visited {
	border-radius: 3px;
  border-width: 1px;
  border-style: solid;
  border-color: inherit;
	transition: all 0.35s;
}

input[type=text], input[type=email], input[type=url], input[type=password], input[type=tel], input[type=number], input[type=search], select, textarea {
	border-radius: 3px;
	transition: all 0.35s;
}

a.header-cta {
	color: #fff;
	border: 3px solid #fff;
	padding: 5px 25px;
	background-color: transparent !important;
	transition: all 0.35s;
}

a.header-cta:hover {
	background-color: #fff !important;
	color: #222 !important;
}

/* ------
Social Icons
------- */

.header-widget .widget_nav_menu li {
    display: inline-block;
}

.header-widget .widget_nav_menu li a {
    padding: 10px;
}

/* ------
Wrappers
------- */

body .grid-container {
	max-width: 100%;
}

/* ------
Header
------- */

#mobile-header {
    position: fixed;
    bottom: 0;
}

#generate-slideout-menu {
	border-top-right-radius: 10px;
}

.slideout-navigation ul:not(.toggled) .dropdown-menu-toggle:before {
    transform: rotate(180deg);
    display: inline-block;
}

.offside {
	height: auto !important;
	bottom: 0 !Important;
	top: auto;
}

.offside-js--is-open .slideout-overlay {
	opacity: 0.5;
}

.slideout-exit {
	visibility: hidden;
}

/* ------
Fixed Header
------- */

@media (min-width: 769px) {
	body {
		margin-left: 200px;
	}

	.site-header {
		position: fixed;
		left: 0;
		top: 0;
		width: 200px;
		z-index: 300;
		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;
	}
}

.inside-header {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
	height: 100%;
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
}

.site-branding,
.site-logo {
	-webkit-box-ordinal-group: 2;
	    -ms-flex-order: 1;
	        order: 1;
}

.header-widget {
	-webkit-box-ordinal-group: 4;
	    -ms-flex-order: 3;
	        order: 3;
	margin-top: auto;
	margin-bottom: 20px;
}

.nav-float-right .inside-header .main-navigation {
	-webkit-box-ordinal-group: 3;
	    -ms-flex-order: 2;
	        order: 2;
	float: none;
	margin-top: 20px;
	margin-bottom: 50px;
}

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

.dropdown-hover .site-header .main-navigation .main-nav .sub-menu {
	opacity: 1 !important;
	display: block !important;
	right: auto !important;
	position: relative;
	top: auto;
	float: none;
	text-align: center;
} 
/* End GeneratePress Site CSS */

/* Start My own Custom CSS */
.one-container .inside-article {
    padding: 0px 30px 30px;
}

.site-header {
		background-color: #222C3C;
	}
		
.inside-header {
	padding: 0px 0px 0px 0px;
}

.main-navigation:not(.slideout-navigation), 
.main-navigation:not(.slideout-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 #f0b23a;
}

.site-branding,
.site-logo {
	padding-left: 15px;
	padding-top: 15px;
	padding-bottom: 15px;
	border-style: hidden;
  border-top-width: 5px;
  border-top-style: solid;
  border-top-color: #f0b23a;
}

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

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

.banner .navigation a {
    background-color: #53a540;
}

.pagination>.active>a, .pagination>.active>a:focus, .pagination>.active>a:hover, .pagination>.active>span, .pagination>.active>span:focus, .pagination>.active>span:hover {
    z-index: 3;
    color: #fff;
    cursor: default;
    background-color: #f39d13;
    border-color: #337ab7;
}

.header-widget {
    float: none;
    top: auto;
    max-width: 100%;
    text-align: left;
	  background-color: #1d2531;
    padding: 20px 0px 0px 20px;
}

.page-header {
	display: none;
}/* End My own Custom CSS */

[David]

Hi Ivan,

in the Sites CSS you have an error where the margin has been set to 00px. (note the code you pasted here is correct).

/* ------
Fixed Header
------- */

@media (min-width: 769px) {
	body {
		margin-left: 00px;
	}

Fix the px and then swap the body selector for body:not(.op-live-editor-page)

[Ivan]

Thank you so much David! It works now.

[David]

You’re welcome Ivan

[Author]

Posts