Okay
  Public Ticket #1323383
Center logo in regular header + portfolio padding
Open

Comments

  • fpuertollano started the conversation

    Hello!

    I have a new question/request that I have been asked to do and caught me completely off guard.

    I need the logo in the header to be at the center of the header but, and here's the catch, maintaining the menu on the right, not underneath as it happens when you choose the logo entered option.

    In the attachments you can see what I currently have and what I wish to have.

    I hope there is a workaround for this, I know it's a bit strange but it a very specific request I've been asked to do, so I need to figure out how. Thanks for your help.

    BONUS: Additionally, I'll take the chance to ask you how to increase the padding of text in the portfolio gallery. As you can see in my portfolio page: http://pty.efepe.es/arquitectura/#portfolio_category_6 , in some cases the title of there work touches the edges of the frame. Also, regarding this, I'd like to know if I can make the whole image clickable rather than just the project title.

    THANKS THANKS THANKS

    Attached files:  02wish.jpg
      01current.png

  •  716
    Qode replied

    Hello,

    1. The only option is to use sticky divided header type:

    http://bridge.qodeinteractive.com/documentation/6-header-setup/6-6-main-menu-navigation/6-6-1-creating-and-styling-menus/6-6-1-1-how-to-create-the-sticky-divided-header-centered-logo-in-between-two-menus/

    and use only right menu navigation

    https://www.screencast.com/t/LhZmj3moBkRp

    But you will need to reduce number of items in the menu, because logo will be overlapped by menu on smaller screen sizes. You can use dropdown menus.

    2. We can't reproduce the issue  with text on gallery. Please check how it looks with large titles:

    https://www.screencast.com/t/PODOEbLjFNo

    If you want to make whole image clickable , please use slow zoom hover animation type in portfolio list settings:

    https://www.screencast.com/t/tGwjN1TBpZt

    All the best,

    The new and improved Online Bridge Documentation is live. Check it out now - LINK

    Also check our articles with useful tips and suggestions

    Best Regards,

    Qode

  • fpuertollano replied

    Hello, thank you for your response.

    1. I've been testing the sticky divided header and while it's a great suggestion from your side based on what I had explained, I reckon it is not exactly what I want. I need to maintain the same number of items on my menu and need them to all stay on the right, and I realise that's not possible with the sticky header since items jump to a second line in smaller desktop browsers.

    Instead of having the logo centered, which anyway would be physically impossible with longer menus, I should have explained that what I really want is the logo to be immediately to the left of the first menu item. Kind of as if the logo were a menu item itself.

    Would that be possible? To have a menu item which is an image instead of text? Or is there another way to accomplish this? To have the logo pegged to the left of the menu? I'm attaching some image mockups to explain better what I mean.

    2. I changed the text style after submitting the ticket and it seems like that fixed the issue a little, although you can see in some cases (like the one attached) that the text gets a but too close to the edge, albeit without touching now which is better. If there is a way to control the padding of this just in case I need it in the future that would be great, but no worries if it can't be done. In regards to the slow zoom hover, it achieved what I needed, even though the animation is a but too slow, but it works so thanks.

    Thanks again for all your dedication, hope you are having a good day!


    Attached files:  question1_exampleA.jpg
      question1_exampleB.png
      question2_exampleA.png

  •  716
    Qode replied

    Hello,

    1. You can  use image as menu item. Upload new image in media, and please remove transparent space from the image:

    https://www.screencast.com/t/f3RJbdkFWri

    Then use image url from the media library:

    http://take.ms/891cN

    Then go to Appearance> menus end edit the menu. Add  home to menu and change navigation label. Add html img tag like this:

    https://www.screencast.com/t/unQMogRb

    <img src="your-image-link">

    If you upload larger image, try to set size like this:

    nav.main_menu ul li:first-child a img {
        max-height: 45px !important;
       
    }

    2.  Maybe you can try with this snippet in Qode Options>General>Custom Css:

    .projects_holder.hover_text article .hover_feature_holder_title .portfolio_title, .projects_holder.justified-gallery article .hover_feature_holder_title .portfolio_title {
        padding: 0 5px !impotant;
    }

    Hope this helps,

    The new and improved Online Bridge Documentation is live. Check it out now - LINK

    Also check our articles with useful tips and suggestions

    Best Regards,

    Qode

  • fpuertollano replied

    Hello!

    1. Thank you for this solution, it achieves the effect that I wanted but has now brought some other issues that I hope are fixable so it can be perfect perfect:

    • Can I modify the position of the image I have set as a menu item? As you can see, our logo has two descending letters (the "p" and the "y") and since the image is aligned at the bottom, the baseline of the logo is higher than the one of the menu items. Ideally I'd like to adjust the position of the image of the first menu item that you've helped me make, but if that is not possible perhaps at least I could change the alignment of all menu items to the horizontal axis so I can make it seem more aligned.
    • Another issue I'm finding if how to hide the logo from desktop layout, since it's already in the menu, I've tried adding a transparent image but I'm not sure if there is a better way.
    • Finally, in the mobile version, is it possible to not show this first menu item with the logo? And if it's not possible to hide it in the mobile menu, can I at least change the size? Now it looks huge.

    2. I've been asked to change the layout of the portfolio so I'll put this question on hold for now and will get back to you depending on whether I still have the issue with the new layout.

    Thank you very very much, have a great weekend!


  •  735
    Qode replied

    Hi There,

    Sorry for late response, we were working with limited resources over the weekend.

    1.1. Please apply this css in Qode Options > General > Custom CSS field:

    ul#menu-empty-menu li:first-child a span:first-of-type img {
        margin-bottom: -6px !important;
    }

    1.2. Yes, there is a better way, by applying this css in Qode Options > General > Custom CSS field:

    @media screen and (min-width: 1000px) {
        .q_logo a {
            display: none !important;
        }
    }
    

    1.3. If you want to hide first menu item on mobile screens, please apply this css in Qode Options > General > Custom CSS field:

    @media only screen and (max-width: 1000px) {
        nav.mobile_menu li#mobile-menu-item-373 {
            display: none !important;
        }
    }

    2. All right, if there’s anything else we can help you with, please let us know.

    Thanks for patience.

    Best Regards.

    Attached files:  2017-10-09_1402.png

    The new and improved Online Bridge Documentation is live. Check it out now - LINK

    Best Regards,
    Qode

  • fpuertollano replied

    Hi,

    Thank you for your response and solutions. Everything worked perfectly. You are great!

    You can close this ticket now.

  •  716
    Qode replied

    You're welcome. If you have some spare time and if you are satisfied with our support, we would really appreciate it if you would be willing to rate us with 5 stars on this link - http://themeforest.net/downloads By doing this you will be helping us build even better themes and provide better support. Thank you in advance

    The new and improved Online Bridge Documentation is live. Check it out now - LINK

    Also check our articles with useful tips and suggestions

    Best Regards,

    Qode