Customize header, navigation and containers with CSS

Resolved vonaj
(@vonaj)

5 years, 10 months ago

Hey guys!

Please I could really use some help with customizing my website with CSS. I use the free version of GP.

This is how the header area looks on mobile:
https://ibb.co/C8rPHnw

As you can see, the header is separated from the primary navigation menu bar.
But I want both to be together just as it appears on desktop as shown here:

https://ibb.co/qJ0r7g7

I want the logo to be at the centre between the menu icon (on the left) and the search icon (on the right), more like this:
https://ibb.co/PjTx59y

In addition, I want the box shadow of the post area and sidebar widget containers to be applied only to the left and bottom borders with no effect on the top and right borders.

Finally, I want the top of the sidebar widget containers to be just like this:
https://ibb.co/SxTyJs3

The page I need help with: [log in to see the link]

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

David
(@diggeddy)

5 years, 10 months ago
Hi there,

try this CSS to centre the logo between the nav and search icon
```
@media(max-width: 768px) {
    .site-header .header-image {
        position: absolute;
        top: 15px;
        left: 50%;
        transform: translateX(-50%);
    }
}
```
Box shadow – change your CSS to this:
```
.inside-article, .sidebar .widget, .comments-area {
    box-shadow: -4px 4px 7px rgb(30, 115, 190 );
    transition: box-shadow 500ms ease;
}
```
Sidebar widgets:

.sidebar .widget {
padding: 0 30px 30px !important;
}
```
.sidebar .widget-title {
    padding: 15px 30px;
    margin-left: -30px;
    margin-right: -30px;
    background-color: #1e73be;
    color: #fff !important;
}
```
Thread Starter vonaj
(@vonaj)

5 years, 10 months ago

Many thanks David! It worked like a charm!!!

Any chance I can further reduce the header height on mobile?

Thread Starter vonaj
(@vonaj)

5 years, 10 months ago

I’d also like to remove the “Menu” text beside the menu icon. On smaller screens it overlaps with the logo.

Thread Starter vonaj
(@vonaj)

5 years, 10 months ago

Also I’d like the menu icon and search icon a little bit bigger
Leo
(@leohsiang)

5 years, 10 months ago
You could try this:
```
@media (max-width: 768px) {
    .site-header {
        margin-top: -25px;
    }
    span.mobile-menu {
        display: none;
    }
    .menu-toggle, .search-item a:before {
        font-size: 20px !important;
    }
}
```
Thread Starter vonaj
(@vonaj)

5 years, 10 months ago

Perfect! Thanks a lot Leo. And thanks to you both for the swift response.

Leo
(@leohsiang)

5 years, 10 months ago

No problem 🙂

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

The topic ‘Customize header, navigation and containers with CSS’ is closed to new replies.

Tags