Adding a logo move menu

Dashboard –> Pages –> All Pages

Click on page title.

At bottom right Set featured image

Thank you, webkong.

What I’m trying to do is to remove the header image that appears on every page, and replace it with a featured image. I’ve found the CSS code that removes the header from a certain page. But when I set the featured image, it appears as a thin bar instead of the full size image.

So is there also a possibility to change the size of the featured image?

@rb3498: You could make use of some custom CSS in order to change the height of your featured images.

The following would increase featured images on all pages of your site:

@media screen and (min-width: 1230px) {
.hero.with-featured-image, body[class*="front-page"] .hero {
    padding: 200px 0;
}
}

You could increase/decrease the value of 200px in order to increase/decrease the image’s height.

In case you’re not aware: You should never edit your theme’s files directly as changes made will be lost when it comes to update. Instead, to add CSS, you can activate Jetpack’s custom CSS module and then navigate to Appearance > Edit CSS. (Alternatively, you can set up a child theme or activate a standalone CSS plugin.)

Let me know how you get on with that! I’d be happy to help with any other questions, too.

@siobhyb: Thank you so much. That totally does the trick!

I would also like to add a custom logo (image) to the website. So that it will appear above the header, and next to the menu. I’ve seen this on a few other Edin-themed websites, but haven’t been able to do it myself. Can you help me with that?

Edin supports a logo with the Jetpack plugin active. Since you have Jetpack active, open the Customizer and head to the Site Title, Tagline, and Logo panel, and you’ll see a spot where you can upload a logo.

@kathryn Thank you. I hadn’t activated Jetpack jet. Now I have and added a logo succesfully.

Is it possible to have the logo on the left and the classic menu on the right? I have the standard menu now, but I rather have the classic menu next to it.

Hi there,

You could use some extra custom CSS to float your logo and menu next to each other:

@media screen and (min-width: 1020px) {
    .header-wrapper {
        float: left;
        width: 35%;
    }
    .navigation-classic .primary-navigation {
        float: left;
        width: 60%;
        margin-top: 50px;
    }
}

Give that a try and let me know how you get on. ??

@siobhyb Thank you Siobhan! I managed to move the logo and menu with the CSS you posted above. However, it left a bit of space between the logo and menu (even when I decreased the margins).

I did come across this topic, and tried the CSS Kathryn posted there and that did the trick.

As I said, I don’t know a lot about CSS: I just tried a few things. This is what I did for my website now:

@media screen and (min-width: 1230px) {

.primary-navigation {
     display: inline;
     float: right;
}

.navigation-classic .menu-primary, .navigation-classic .menu-secondary {
     width: 670px;
}

.header-wrapper {
     display: inline;
     width: 375px;
}

.site-logo-link {
    float: left;
    margin-bottom: -25px;
}

Thank you, everyone for being so kind and helpful ??

@rb3498: Perfect! I’m glad you were able to experiment and find CSS that worked out for you.

Thank you for sharing here, too, so that others may benefit.