[bmflorekParticipant]

New to the theme. It’s awesome so far. I want to put the logo in the upper left of the header but I want to keep the header height 75px. The circular logo I am using will be roughly 225px high. Is it possible to have it hang over the header?

Browsing the forum I found the following:

.x-navbar-fixed-top {
height: 75px;
}

Once I begin scrolling it seems to work, but the logo initially skews the header height. Any suggestions?

[bmflorekParticipant]

Also, I am on WordPress 4.2.1 using x theme 3.2.5.

[Rue NelModerator]

Hello There,

Thanks for posting in!

To put the logo in the upper left of the header and make it look like hanging by the header, please add the following css code in the customizer, Appearance > Customize > Custom > CSS

@media(min-width: 768px) {
 .x-navbar .x-brand {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1100;
 }
}

Let us know if this has been helpful to you.

[bmflorekParticipant]

You guys rock! Thank you so much for the quick response. It worked flawlessly!

[Peter MParticipant]

Thanks for this solution you posted. It worked for me beautifully, after quite a few hours of figuring out how to do this! However, I did notice that when I reduce my browser’s screen width my navbar links start to disappear behind my logo image (which is 300px wide), instead of wrapping below it. The same applies to my main content, which starts above the logo image, and alos starts to disappear when the browser window reduces. Is there any way of handling this, so that my hanging logo does not cause that problem, please? Thanks!

[ZeshanMember]

Hi @bmflorek,

You’re most welcome! 🙂

To @Peter: Please provide us with your URL so that we can take a closer look to the issue and provide you with a tailored response.

Thanks!

[Peter MParticipant]

Thanks for your quick reply. Unfortunately I am under construction so you won’t see it!

I have partly solved the issue to my part satisfaction by using custom css in the customiser:

– adding padding to the left sidebar to bring it below the absolute placed brand image (which is only a placeholder right now – I am just beginning on the site)

– altering the image size to reduce it when text starts to disappear behind the image, and until the mobile menu clicks in. However, this is all guessed from reducing my browser screen size! And I note that though the image size reduces the inmage, the box sizing of the link wrapping the image remains full size, thus preventing things from collapsing more elegantly.

If you can offer any tips on how to do this better, I would be very grateful!

[Rue NelModerator]

Hello @pfm,

Please provide us the url of your site. You have provided the login but no url.
We have remove the access info because it is not set as private.

If you have any additional questions at this time we kindly ask that you open them up in a separate thread. The longer threads get in the forum, they become more difficult to support as they tend to drift off topic and they also make it troublesome for users trying to search for solutions. Keeping threads relevant to their original inquiry ensures that we can keep better track of what has been resolved and that users can more effectively find answers to similar issues they might be experiencing.

Thanks!

[Peter MParticipant]

Sorry, I have also noted that the Page Titles disappear when fully sized and reappear when on tablet/mobile!

[Rue NelModerator]

Hey Peter,

So that we can assist you better with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Please do not forget to set it to private to make sure that only the support staff can view your username and password. Once you have provided us with your URL, we will be happy to assist you with everything.

Thanks for understanding.

[Peter MParticipant]

This reply has been marked as private.

[ChristopherModerator]

Hi there,

Please remove this code:

@media (min-width: 1200px)
.x-sidebar {
  margin-top: 220px;
}

And add this code :

@media (max-width: 1400px) and (min-width: 768px){
.x-brand.img {
  max-width: 15%;
}
}

Hope that helps.

[Peter MParticipant]

Hi! Thanks for your suggestion, but I am sorry to say I misled you. I decided not to be concerned to get the H1 appearing in the landmark bar (I will remove them and put them elsewhere), but I was concerned to get the images appearing correctly at different screen widths. I have done my best with that and would be very grateful if you could check my code. It seems to do the job (ignore the page titles coming through the logo!):

@media (max-width: 1199px) and (min-width: 980px) {
.x-brand.img {
max-width: 15%;
}
.x-sidebar {
margin-top: 60px;
}
}
@media (max-width: 979px) and (min-width: 768px) {
.x-brand.img {
max-width: 20%;
}
}

@media (max-width: 767px) and (min-width: 100px) {
.x-brand.img {
max-width: 25%;
}
}

@media (min-width: 980px){
.navbar, .x-brand {
position: absolute;
top: 0;
left: 0;
}
}

@media (min-width: 1200px){
.x-sidebar {
margin-top:250px;
}
}

@media (min-width: 100px) and (max-width: 979px) {
.navbar, .x-brand {
position: relative;
top: 0;
left: 0;
}
.x-sidebar {
margin-top: 0;
}
}

.x-navbar, .x-breadcrumb-wrap, .x-header-landmark , .widget ul, .widget ol , .widget ul li, .widget ol li {
box-shadow: none;
border:none;
}

.body, .x-colophon.top, .x-breadcrumb-wrap {
background: #fff;
}

.x-header-landmark {
padding: 15px 0 40px;
}

[Rue NelModerator]

Hello There,

Your code is doing pretty good. It’s just that the image when it’s in 25%, the text in the logo is no longer readable. Maybe you do have another image with different dimension.

Please let us know how it goes.

[Peter MParticipant]

Thanks very much for your comment, and for your help. I will let you know how it goes.

Best wishes,

Peter

[Author]

Posts