HTML Left in Menu bar

[ROBIN]

How do I move the HTML image farther to the right?  It is way over on the left and needs to become more of a part of the Menu bar.

 

The website is theredhenstudio.com

Thanks for any help you can offer.

 

[scrambler]

cant get to the website

 

[Weaver]

I believe the class for your RED HEN image is:

.header img {
}

You should be able to add some custom CSS with margin-left or padding-left as needed. You could also use a .is-phone .header img {} rule to adjust height: to make it smaller in your phone view.

[ROBIN]

The Website url is https://theredhenstudio.com/

I don’t think I asked my question very well, Sorry about that.  I have the Logo in the Menu Bar which I added by using the add HTML to the left of the menu bar option in the menu option area.

I need the logo to be closer to the links in the menu bar and I am afraid that there is going to be a ton of margin, which I think will make it look weird on phones and maybe tablets.

So, the first question is how do I move it and the second question is will that mess up how it looks on smaller screens?

Thanks for your patience!

[Weaver]

The left logo class is

.wvrx-menu-left

You should be able to add whatever padding/margins you want. e.g.,

.wvrx-menu-left { padding-left: 10px;}

and that margin would be added to all formats – phone, tablet, full.

So you could add an extra rule for phones:

.is-phone .wvrx-menu-left { padding-left: 1px;}

[ROBIN]

When I use that code it moves the menu links to the right too.  I would like to get the logo closer to the links so it isn’t off by itself, without uncentering the links.

Is that Possible?

[scrambler]

Well with the menu set to center, it will be centered in the area right of the logo.

What you can do is change the menu alignment to left, then add the rule below to adjust the left margin

ul.wvrx-menu {margin-left:200px;}

This will affect the responsiveness of the logo and menu, so play with resizing the browser size to check how it behaves at different resolution.

If you wanted the logo to be next to menu and move with it, you could insert it as a menu item in your custom menu instead

[User]

@Scrambler

Would it be possible to add a “Z” component to the Header Image, so it moves freely “in front of” the Menu?

That would leave the Menu centered and keep the Header Image setting totally separate from the Menu ones, and so much easier to position it.

FYI, I see that the Header Image is now off to the right on phones, rather than centered.

@Robin

As above, the Header Image is now off to the right on phones, rather than centered.

Also I see that the “l e a r n i n g   i s   o u r   a r t ” text is kind of unreadable on phones…..  please see phone screen capture.

Regards and thanks!

Screen Capture Image Link

[scrambler]

@user, yes you can do that with position absolute, but then it becomes nonresponsive, in that as the browser gets smaller, the menu moves left and the logo will be on top of the menu.

 

[User]

@Scrambler, thanks. I thought it seemed too easy a solution.
It never dawned on me the non-responsive issue, as I’ve never heard of that before. But makes sense now you mention it, and explains why the “Z” option is seldom invoked.
Regards!

[ROBIN]

@Scrambler, I used Weaver’s code and that did move it.  I can’t make your code move it even a little.  I think it looks acceptable for now.

[scrambler]

As long as you are happy 🙂

[Author]

Posts