• Hi,
    I’m trying to update my top menu columns so they would show images and text instead of just text.
    When I try to set ‘width’ and ‘Height’to this menu images it also changes the width and height of the logo image element above.
    How do I set different class or styles for them?
    Or, is there a plugin I could use?
    This is my home page:
    https://Www.balaboostafoodblog.com

    Thank you,
    Ron

Viewing 11 replies - 1 through 11 (of 11 total)
  • Hey there Ron,

    I’m not sure what you mean by that, you should be able to target menu items separately.

    Can you please add more information on what you’re trying to achieve and which code you’re using so I can take a look and try to help ??

    Cheers,
    Bojan

    Thread Starter ronch

    (@ronch)

    Hi Bojan,

    Thank you for replying back.

    Please take a look at this screenshot.

    and this on as well.

    When I add images to the menu columns the images dimensions show at full width and height (too big from what they should be).
    If I try decrease their dimensions, the logo image changes as well.

    Hope this is clearer now.

    Thanks,
    Ron

    Hey again Ron,

    It makes sense now, I understood that the first time, what I was looking for was you adding the images or explaining how you’re adding them into your header.

    Either way you can define all your images in the header they way you already do and then add more specificity in the CSS for the your logo since it has class of its own which you can target. So please try adding the following CSS after you define your images code in the style.css file of your child theme or if your theme doesn’t have custom CSS tab add it in your site using the following plugin:

    https://www.ads-software.com/plugins/simple-custom-css

    #masthead img.custom-header-image {
      width: 380px;
      height: 335px;
    }

    This should set the current width and height to the logo and not affect those other images. If this doesn’t work please add those images so I can take a look.

    Best regards,
    Bojan

    Thread Starter ronch

    (@ronch)

    Hi Bojan,

    Thank you ??
    Your advise has worked perfectly.

    I’ve got another quick question, it would be great if you could assist again.

    After I’ve added the menue images, I’m now trying to add some text just above those images. e.g – an ‘about me’ text just above the ‘about me’ image.
    I tried to to style the text but I couldn’t find any style defind for it.
    I think that I should create a specific div or div class for the text in the menu, but I’m not sure about how to include this new class.
    P.S – I’m using the ‘Menu items‘ plugin.
    Thanks again,
    RON

    Hey Ron,

    I’ve checked your site and I’m not being able to see the text that you have added on your screenshot, can you please add it and I’ll try to see if I can do anything to help you out with that one ??

    Cheers,
    Bojan

    Thread Starter ronch

    (@ronch)

    Hi Bojan,

    Sorry about that.
    Please try this URL instead:
    https://www.balaboostablog.com/
    Look for the ‘my story‘ image in the menu.

    Thank you,
    Ron

    Hey again Ron,

    To move the text above the image please try adding the following:

    .menu li a span {
      position: absolute;
      width: 100%;
      top: 0;
      left: 0;
    }
    
    #access a {
      position: relative;
    }
    
    #masthead img {
      margin: 20px 0 0 0;
    }
    
    #masthead img.custom-header-image {
      margin-top: 0;
    }

    This should be the result https://screencast.com/t/V8L4EIUlnZm.

    Hope this helps ??

    Cheers,
    Bojan

    Thread Starter ronch

    (@ronch)

    Hi Bojan,

    Sorry it took me some time to responed, since I just got back from a holliday ??

    Anyway, I’ve tried to implement the coding you suggested and it worked, except the text obove the menu images does not allign well at the top.

    I’ve noticed that since there are a few #masthead img selecters, wordpress chooses to ignore the #masthead img I’ve applied to ‘simple custom css’.
    ** This is my current test home page url
    https://www.balaboostablog.com/

    Thank you,
    Ron

    Hey Ron,

    It looks pretty good on my end, see screenshot https://screencast.com/t/9tebHyQyQ.

    Is this happening on specific browser or OS?

    Best regards,
    Bojan

    Thread Starter ronch

    (@ronch)

    Hi Bojan,

    I’ve managed to find how to change the selector’s values ??
    Apparently, It was under custom-header.php.

    Thank you so much for your help and patience.
    Have a great weekend.

    Glad you managed to figure that out ??

    Have a great weekend too!

    Cheers,
    Bojan

Viewing 11 replies - 1 through 11 (of 11 total)
  • The topic ‘Define logo and menu elements seperately’ is closed to new replies.