Home Forums Weaver Xtreme Theme HTML Left in Menu bar

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #74469
    ROBIN
    Participant

    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.

     

    #74470
    scrambler
    Moderator

    cant get to the website

     

    #74471
    Weaver
    Keymaster

    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.

    #74472
    ROBIN
    Participant

    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!

    #74477
    Weaver
    Keymaster

    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;}

    #74529
    ROBIN
    Participant

    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?

    #74532
    scrambler
    Moderator

    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

    #74536
    User
    Moderator

    @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

    #74539
    scrambler
    Moderator

    @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.

     

    #74540
    User
    Moderator

    @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!

Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.