[andersolofssonswe@gmail.comParticipant]

Hello!

I have set a background image containing a logo in .x-navbar-inner and I would like to make it clickable (or make a clickable area around the logo, but the whole image would be fine). Could not find anything in the forum. Any ideas?

I’m using Renew.

http://eps-peps.se

/Anders

[JoaoModerator]

Hi Anders

If you use a stacked header at Appereance > Customizer > Header and add that banner as your logo image it should be clickable.

Hope that helps

Joao

[andersolofssonswe@gmail.comParticipant]

Thank you!

Yes, that might work, but the logo is the one that is set to the right of the menu. The company behind the site is EPS BYGG (the logo in the banner), but the purpose of this site is to promote and host their software called PEPS. So the PEPS logo should still be set as logo. I had the logo to the left of the menu at first, but my customer just decided he wanted to the right, which I didn’t like since it is good practice to have a clickable logo in the upper left corner. But he insists. That’s why I want to make the banner clickable. If possible.

I found this, but it didn’t really help: https://community.theme.co/forums/topic/clickable-background-images-in-logo-bar/

FYI, I am using a child theme set, btw.

/Anders

/Anders

[RupokMember]

Hi Anders,

You have just set a background image for the Navbar inner and the whole thing is within that if you notice. So it’s not really possible to make the banner clickable as it’s not an image rather just the background image of everything.

You can try enabling Topbar and adding as image wrapped with link. We can help you to position this if needed.

Cheers!

[andersolofssonswe@gmail.comParticipant]

Awesome! 99% there. Now I just want to get rid of that padding/margin at the top.

Here’s what I’ve added so far:

.x-topbar {
padding-top:0px;
}

.x-topbar-inner.x-container.max.width {
width:100%;
}

Another question. I added custom css to swap the menu/logo left/right. But on mobile devices I would like to have them “unswapped”. Should be simple? The “swap code”, as it is now:

.x-nav-wrap.desktop {
float: left;
}

.x-navbar .x-brand {
float: right;
}

.masthead-inline .x-navbar .desktop .sub-menu {
left: 0;
right: auto;
}

I’ve tried adding @media (min-width: 480px), and various other settings, and get different results but not the right one. Any suggestions? Thank you! 🙂

[JoaoModerator]

Hi There,

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

.x-topbar .p-info {
    margin: 0;
}

Hope it helps

Joao

[andersolofssonswe@gmail.comParticipant]

Thank you! Yes, it did!

But I would like the topbar to stay when I scroll down, and also not have the menu “jump” and get narrower.

Tried this, but ended up with two topbars on top of each other (disabled it):

How do I set make the top bar fixed like the nav bar?

/Anders

[JoaoModerator]

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

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

Thanks

Joao

[andersolofssonswe@gmail.comParticipant]

This reply has been marked as private.

[RupokMember]

Hi there,

Thanks for writing back. As it’s something out of the box, you need some more JS and CSS code.

Let’s add this under Custom > JavaScript in the Customizer.

jQuery( function($) {    
      $(window).on("scroll", function () {    
    if($('.x-navbar').hasClass('x-navbar-fixed-top')) {
      $('.x-topbar').addClass('x-topbar-fixed-top');
                }else {
                        $('.x-topbar').removeClass('x-topbar-fixed-top');
                }   
  }).scroll();
});

Then add this under Custom > CSS in the Customizer.

.x-topbar.x-topbar-fixed-top {
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
}
.x-navbar.x-navbar-fixed-top {
  top: 100px;
}

Hope this helps.

Cheers!

[andersolofssonswe@gmail.comParticipant]

Thank you ever so much for all your help! It works now, but there’s still a bit of glitch when you scroll down. Worse: my anchorpoints down the page are messed up (when you click through the menu). Maybe I can fix that on my own, though. 🙂

[JadeModerator]

You’re most welcome.

Feel free to let us know if you need further help!

[andersolofssonswe@gmail.comParticipant]

Thank you so much for helping me find a solution for the topbar! Unfortunately this messed up my One page nav – but only on the computer, on ipad & mobile they’re perfect. Wasn’t sure if I should start a new topic for this, but decided to stick to this one.

When you click in the menu, the top of the “anchored section” disappears under the topbar. I can solve this by adding padding to the top of the section, but that looks ridiculous when you scroll.

It is also weird that if you click on, say, DEMO twice, the section moves back down a bit.

Any ideas…?

EDIT: This is all because I had to swap the menu/logo left/right. I still have my test site up and running, where the top banner is set as background in the navbar (and therefor not clickable), and Topbar is disabled. Of course, it works perfectly there! If it’s any help, here it is: http://ichbinanders.se/peps/

[RupokMember]

Hi there,

What you did is pretty unusual for a One Page Navigation site. You have fixed the Topbar and Navbar which has 100px+ height and simply that will cover the section which is pretty expected. Further customizations from here would be getting into custom development, which is outside the scope of support we can offer. If you need more in depth changes, you may wish to consult with a developer. X is quite extensible with child themes, so there are plenty of possibilities. Thanks for understanding.

[andersolofssonswe@gmail.comParticipant]

Thank you. I do very much understand. You have been more than helpful!

[Author]

Posts