Docs

[Jayd K]

Hi there,

I was wondering if you could help me?
I am using the Renew Stack, and have made a topbar and navbar at the top of my site.
The topbar contains some text, and the menu has been brought higher up to fit well within the grey space (the topbar and navbar combined). However, with the logo, the image will not raise higher up to meet the middle of the grey space at all.

I wondered if there was a way to bring it a little higher up, so it sits in the middle of the grey space?
In the customiser, the navbar top height is set to 0, the navbar top logo alignment is set to 0, the navbar top link alignment is set to 10. I am curious that the logo will not move up when decreasing the number. but that the navbar will.

Please let me know if I can use CSS to bring the logo a little higher. Many thanks.

Here is an image to illustrate what I am trying to achieve, as well as the url which is http://www.simplysignspreview.com/reddotjewels

[Lely]

Hi There,

Thank you for the detailed explanation.
Please note that Topbar is a block. Then below it the logo and navigation is inside another block. See attached screenshot. We will need css positioning to achieve this. Please add the following custom CSS:

.x-brand {
    margin-top: -47px;
}
.x-navbar-wrap {
    z-index: 9999;
    position: relative;
}

Then set navbar height so that the grey bar will not decrease as we move the logo above.

Hope this helps.

[Jayd K]

Hi there,

Many thanks for your solution. This looks great on desktop, but sadly does not bode well on mobile. The social media icons then are placed over the top of the logo, and they appear on top of each other.

If they navbar and topbar are both blocks, I would instead be interested in moving the social media icons in the topbar, instead of being above the navbar. I would like them to appear in a row after the email in the very top right hand corner of the topbar. Is this possible, and also for it to look good on mobile?

Then I could remove the main social media icons which appear to float above the navbar, taking up precious space.

Many thanks

[Joao]

Hi There,

Please add the following code to Appereance > Customizer > Custom > CSS

@media (max-width: 480px) {
.x-topbar {
  padding-top: 70px;
}
.x-topbar .x-social-global {
    margin-top: -110px;
    float: right;
    width: 40%;
}
.masthead-inline .x-btn-navbar {
    margin-right: 45%;
    margin-bottom: 5%;
}
}

Hope that helps

Joao

[Author]

Posts