How do I achieve a logo bordering the nav menu & why is there so much white space?

This screenshot says it all:

How to Place Logo on Secondary Nav Menu and Reduce Surrounding White Space

Could you kindly provide me a screencast, as your text tutorials often leave me confused, as I am more of a visual learner than a reader? If you can't, I perfectly understand but please provide the steps in greater detail. Thank you very much.

Sincerely,
Caleb

  • Denitsa
    • WordPress Warrior

    Hello there caleb.mkdaman,
    I hope you're doing great!

    Unfortunately, from the screenshot you've posted I can't see the whole page. I'll assume here you're talking about your http://thewebkohder.com/bacoffproducts_sitereview/ website.

    You would need to you custom CSS here. You can add this in a child theme in its style.css, via Upfront Editor (you go to Theme settings -> Global theme CSS as shown below ) or using a plugin like https://wordpress.org/plugins/simple-custom-css/.

    .upfront #wrapper-1486367556608-1300 {
        width: 60%;
        margin-left: 40%;
    }
    
    .upfront #wrapper-1486969796226-1688 {
        height: 720px;
    }

    Can you then try and move your elements around via Upfront so you achieve your desired look?

    You can grant support access from the dashboard plugin so we can take a closer look if you wish.
    This could be done via Dashboard - WPMU DEV -> Support -> Support Access -> Grant Access or by following this guide here:
    https://premium.wpmudev.org/manuals/wpmu-dev-dashboard-enabling-staff-login/

    Let me know how it goes.

    All the best,
    Denitsa

  • caleb.mkdaman
    • Site Builder, Child of Zeus

    Denitsa

    Hi Denitsa,

    Thanks for your prompt reply. I tried the CSS code but it didn't work. I also can't move my elements around, because they (the logo, nav menu above the search bar, search bar) seem to be linked to each other! :laughing:

    I hope you can help me take a look and maybe fix it so it looks like the logo is just above the main nav menu. I have already granted support access. Thank you Denitsa.

    Sincerely,
    Caleb

  • Rupok
    • Support Ninja

    Hi Caleb,

    So sorry for the inconvenience. I've added the following custom CSS code in your "Global Theme CSS" section:

    .upfront #module-1486366890214-1597 #image-1486366890205-1726 {
      padding-top: 42px;
    }

    Please check the attached screenshot for reference.

    Now your logo is with the border of your secondary menu.

    Can you please check and confirm?

    Please let us know if you have any confusion or any further query. We will be glad to help

    Have a nice day. Cheers!
    Rupok

  • caleb.mkdaman
    • Site Builder, Child of Zeus

    Thank you Rupok, but I was wondering if you could make it border on the MAIN nav menu, not the one above the search field. Sorry for not spelling it out clearer. That means, no space between the logo and main navigation menu (the one with the About Us, Products, New item, New Item, etc.).

    Is that workable or viable? Thank you so much!

  • Rupok
    • Support Ninja

    Hi caleb.mkdaman,

    If I understood it right, then are you trying to achieving this?

    I'll write custom CSS code and provide you that as soon as you confirm.

    I'm looking forward to hearing from you and resolving this issue as soon as possible.

    Have a nice day. Cheers!
    Rupok

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.