Docs

[trobitech]

Hello X Theme Team,

I wanted to inquire about a little dilemma I have having. I would like to have my Logo in-line with my Navbar with the background remaining #272727.

I found a separate snippet of code for the .x-navbar that allows me to have image loaded in however it does not move navbar over properly (especially at different sizes [smaller window etc.]).

.x-navbar {
background-color: #272727 !important;
border: 0;
}
.x-navbar {
background-image: url(http://muezue.com/wp-content/uploads/2017/02/Logo-for-white-background.png);
background-repeat: no-repeat;
background-size: auto 100%;
line-height: 100px;
}

the website is muezue

Can I please have some assistance with this

[trobitech]

This reply has been marked as private.

[Lely]

Hi There,

Can you give us screenshot how you want it? Css is working as expected. We can combine both CSS to this:

.x-navbar {
background-image: url(http://muezue.com/wp-content/uploads/2017/02/Logo-for-white-background.png);
background-repeat: no-repeat;
background-size: auto 100%;
line-height: 100px;
border: 0;
}

You can see I have remove the background. Is that what you want? Please note the background image will always be on top of background color.

Regarding the position of your navbar, it is inside the container where you have added the background image.
Try adding this custom CSS too:

@media screen and (min-width: 960px){
.ubermenu-responsive-default.ubermenu {
    display: block!important;
    padding-left: 100px;
}
}

If this doesn’t achieve what you want, please give us screenshot of what you want to achieve.

[trobitech]

Great! That second piece of CSS helped me achieve what I was trying to with keeping it from overlapping the Navbar buttons (Menu / music etc).

Now the part I the part I am not understanding is how do I keep the logo going behind the mobile navbar drop down and being spaced properly next to it. (picture attached)

http://imgur.com/a/TDLUz

[trobitech]

Ill take your guys input on this, but I suppose when it gets small enough for the drop down to pop up is it possible to have the logo go stacked and be above the menu bar?

[trobitech]

I am sorry, I guess I should be more thorough before saying that something is complete. However now the items on the navbar are shifted over when in full screen. But when I shrink the screen it is what I want where logo is not being overlapped.

http://imgur.com/a/glNGn

[Rue Nel]

Hello There,

Thanks for updating in! Just for future topics, self responding or bumping your post pushes it back in our Queue system so it takes longer to respond to.

To resolve your issue, please add the following css code in the customizer, Appearance > Customize > Custom > Edit Global CSS

@media(max-width: 979px){
  .ubermenu-skin-deepsky.ubermenu-responsive-toggle {
    float: none;
    display: block;
    margin-left: 200px;
  }
}

Hope this helps.

[trobitech]

I see! This was unintentional and I do appreciate the information.

After updating it still is overlapping.

http://imgur.com/a/UtIaH

[Christopher]

Hi there,

Please add following code in Customize -> Custom -> Global CSS :

@media screen and (min-width: 960px){
.ubermenu-responsive-default.ubermenu {
    width: 75%;
    margin: 0 auto;
}
}

Hope that helps.

[trobitech]

Thank you!

Yes this has defiantly helped. One last thing though. The logo is squeezed up on the right hand side. I cant seem to add padding or anything to move the logo at all. I am going to attach a photo (example of what I am wanting) but basically what I am trying to achieve is it always being centered next to the nav bar items. If this cant be achieved is there a way to have it be pretty close to the Home Button, as opposed to the far left?

http://imgur.com/a/iYGtS

[Rue Nel]

Hello There,

Thanks for updating in! Please keep ind mind that since you have made the logo as a background image, you do not have much control of it because it is not an image element object. If you want to move it to the right, please make use of this code:

body .ubermenu-responsive-default.ubermenu {
    margin-left: 120px;
}

body .x-navbar {
    background-position: 20px 0;
}

Hope this helps.

[trobitech]

Hello,

This has helped again but doesn’t fully rectify the issue. I am ignorant in this regard. I only put it as background image because another forum post indicated to do so. In other Theme’s I never have this problem with putting my logo in the top hand right corner with my logo not being crazy over sized and fitting in on the navbar and resizing properly. Please advise me how to proceed the best to achieve what I am trying to achieve…If its not background image please tell me what is the best.

[Joao]

Hi There,

I guess we are doing unnecessary things…

To add your logo inline to your navbar you simply need to go to

Apperence Customizer Header and select Header Inline >

Than select your logo image just below on the same tab.

On Appereance CUstomizer Custom CSS and remove the line:

background-image: url(http://muezue.com/wp-content/uploads/2017/02/Logo-for-white-background.png);

Hope it helps, if you need assistance with further adjustments please let us know.

Joao

[trobitech]

I suppose so. I basically just reiterated what I had stated in my original post in my last post. Sorry for the confusion I suppose.

http://imgur.com/a/yuLk7

http://imgur.com/a/IW8Zi

So again, I am now facing a similar issue that someone else appeared to have resolved through the method we were doing above but I guess that is not a solution for me? Please tell me how to resolve this.

[Christopher]

Hi there,

Since you’re using Ubermenu, you should change settings under Customize -> Ubermenu -> Menu bar and set Menu Bar Alignment to left or center.

Hope it helps.

[Author]

Posts