[Support request] Sider Generate Theme Need CSS Help

[bluebit]

I’m trying to replicate this look: https://www.mpkelley.com/

with the Sider theme of GeneratePress, but I’m having trouble.

How do delete the padding around the body so that it’s completely white or change the color to white? And how to style the main nav on the left side with the same style dropdown?

I’m trying to basically get the exact look.

Thank You

[Ying]

Hi there,

You can set the bodybackground color to white at customizer > colors > body > background.

The site you linked doesn’t have a dropdown menu, would you like your dropdown menu to be left aligned?

If so, try this CSS:

.dropdown-click .main-navigation ul.toggled-on, .dropdown-click .main-navigation ul li.sfHover > ul.toggled-on {
    box-shadow: none;
}

.nav-align-center .main-nav>ul {
    align-items: flex-start;
}

.main-navigation .main-nav ul li >a {
    text-align: left;
}

[bluebit]

Thank you, I fixed the background color. I also added the css for the menu to float left, but it seems to jump to the left every time I click the menu that has the submenu. Is there a way to click the main menu without have it jump to the left? I want the effect of the main menu to be the same like here: https://www.mpkelley.com/
Also when I click on the menu item Portfolio the submenu appears and then when I click an item in the submenu, the entire submenu item disappears. I do not want the submenu to disappear when I click on an item in the submenu.

Ando also I would like the arrow icon on the main menu to be gone too.

Here is the current code:

/* GeneratePress Site CSS */

@media (min-width: 1000px) {
body {
padding: 0px 0px 0px 0px;
margin-left: 300px;
}

.site-header {
position: fixed;
left: 0;
top: 0;
width: 300px;
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 {
flex: 1;
flex-direction: column;
}

.header-widget {
order: 3;
text-align: center;
}

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

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

.main-navigation .main-nav>ul {
flex-direction: column;
}

.nav-float-right .header-widget {
margin-left: 0;
}

.nav-float-right .header-widget .widget {
margin-bottom: 50px;
}

.nav-float-right #site-navigation {
margin-right: auto;
}

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;
}

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

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

::-moz-placeholder {
font-size: 14px;
}

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

:-moz-placeholder {
font-size: 14px;
}

.no-sidebar:not(.archive):not(.blog) .inside-article > *,
.no-sidebar:not(.archive):not(.blog) #comments,
.no-sidebar:not(.archive):not(.blog) .paging-navigation {
max-width: 700px;
margin-left: auto;
margin-right: auto;
}

@media (max-width: 768px) {
.separate-containers .site-main {
margin-top: 20px;
margin-bottom: 0;
}

.post {
margin-bottom: 20px;
}

.nav-float-right .inside-header .main-navigation {
margin-top: 0;
}
} /* End GeneratePress Site CSS */

[Fernando]

Hi Bluebit,

Let’s try to tackle the menu items jumping issue first.

Can you try adding this CSS?:

nav.main-navigation#site-navigation {
    margin-left: 5px;
}

[bluebit]

Awesome yep that code worked. What next do I need to do?

[Fernando]

Also when I click on the menu item Portfolio the submenu appears and then when I click an item in the submenu, the entire submenu item disappears.

This is the normal behavior since a new page is loaded.

If you want it not to close/refresh, you would need custom code for the or a third party plugin – this would be out of our scope of support however.

With regards to the Arrow, you can try adding this to hide it:

div#primary-menu span.dropdown-menu-toggle {
    display: none;
}

[Author]

Posts