[dmlu10627Participant]

Hello. I’m new to X Theme. It’s a great theme, but I got stuck in arranging the header components.

I’m using Renew theme, and I want to separate the navigation menu into two parts and place them on each side of the logo.

This is an example: http://www.templatemonster.com/demo/45497.html

Can anyone help me with this? Thanks.

[John EzraMember]

Hi there,

Thanks for writing in! First you will need to switch you header to a stacked layout within the customizer.

Appearance > Customize > Header > Logo and Navigation > Layout >> Set to Stacked

This will center you logo and nav. We will now use CSS to hid the logobar so only the nav is showing.

You can add this under Custom > CSS in the Customizer or in your child theme’s style.css file.

.x-logobar {
    display: none;
}

Lastly is to edit your menu. You will need to go into your menu editor within your dashboard. Add a link to your home page and then use HTML for the label instead of plain text.

<img src="yourLOGOimageURLhere.jpg" alt="">

That should do it. Depending on your image you may need to use CSS to adjust it the way you like.

Hope this helps – thanks!

[dmlu10627Participant]

Hi X staff,

Thanks for the quick response. It worked perfectly placing the logo in between navbar links. Again, thank you for your time and input, this is a great community with experts!

[dmlu10627Participant]

I have an extra question regarding the topic. On mobile site regarding also shows the logo inside the menu, can I set it to remove the logo in mobile menu when it shows and place another logo next to the mobile menu button in the center of the header.

And I was unable to define the size of the logo, it gets very small when I set it to width:220px and under, and too large for width over 230px. I also want to add custom background to the navbar with head and tails to the left and right, and I still don’t want it to show on mobile menu.

Sorry I got a lot of questions, thanks in advance!

[dmlu10627Participant]

This reply has been marked as private.

[JadeModerator]

Hi there,

You can add this under Custom > CSS in the Customizer.

@media (max-width: 979px) {
    .menu-item-263 {
        display: none;
    } 
    .x-navbar-inner:before {
        content: url(http://www.americanbabyusa.com/wp-content/uploads/2015/08/American-Baby-logo-FINAL1.png);
    }
}

And would you mind clarifying the second part that you are trying to do? Some screenshots will help. Thanks!

[dmlu10627Participant]

This reply has been marked as private.

[JadeModerator]

Hi there,

Would you mind providing us with login credentials so we can take a closer look? To do this, you can make a post with the following info:

– Link to your site
– WordPress Admin username / password
– FTP credentials

Don’t forget to select Set as private reply. This ensures your information is only visible to our staff.

[dmlu10627Participant]

This reply has been marked as private.

[ChristopherModerator]

Hi there,

Please add this:

li#menu-item-263 img {
    width: 48% !important;
}
li#menu-item-263 a {
    padding-top: 0;
    margin-top: -46px;
}

Hope it helps.

[dmlu10627Participant]

Yes, it works!

My last question for this topic:

@media (max-width: 979px) {
    .menu-item-263 {
        display: none;
    } 
    .x-navbar-inner:before {
        content: url(http://www.americanbabyusa.com/wp-content/uploads/2015/08/American-Baby-logo-FINAL1.png);
    }
}

For the above code, how do I adjust the image size for mobile view. Thanks!

[RupokMember]

Hi there,

Thanks for writing back. You can use different image (smaller maybe?) for mobile since you can’t control the styling of a pseudo content :

@media (max-width: 767px) {
    .x-navbar-inner:before {
        content: url(http://www.americanbabyusa.com/wp-content/uploads/2015/08/American-Baby-logo-FINAL1.png);
    }
}

Change the image with another image.

Cheers!

[Author]

Posts