[Resolved] navigation logo tiny (have tried all suggestions from posts so far)

Home Forums Support [Resolved] navigation logo tiny (have tried all suggestions from posts so far)

Home Forums Support navigation logo tiny (have tried all suggestions from posts so far)

Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • #665943
    Carl

    Hi There

    I want to have my logo in the navigation menu

    I put the logo in the correct place in the primary nav menu settings in customise

    I have adjsted and played with all the settings to no avail

    I have tried all the suggested css tweaks from all the posts I could find from generate press and it makes it worse indifferent ways LOL

    I have created a menu in beaverbuilder that looks the way I want the main nav menu to look and have included a screen shot so that you can see the actual nav menu in BLUE and the beaver builder mockup of ideal positioning in ORANGE

    https://prnt.sc/kpfi94

    Please can you advise css to use to achieve that positioning and correct size. My log is 400 x 40 and transparent pdg

    Many thanks
    Carl πŸ™‚

    Im using latest generate press 2.1.4 and it is showing GP PREMIUM 1.6.2

    GeneratePress 2.1.4
    #666043
    David
    Staff
    Customer Support

    Hi Carl,

    logos in the nav bar will size themselves based on the Menu Item height set in the Customiser > Primary Navigation. So get rid of the related CSS you have and try that πŸ™‚

    #666053
    Carl

    doesnt work
    Ive tried ALL the standard settings in generate press. all of them
    and allof the code in the forum threads so far
    Happy to test any css ideas you have
    Thanks David’

    #666054
    Carl

    just a thought….
    is there css to have the logo 400×40 sho in its actual size regardless of the menu item height

    #666083
    David
    Staff
    Customer Support

    You have this CSS still in there:

    .site-logo {
        width: 140px;
    }

    You could just change it to 400px.

    #666097
    Carl

    ok tried that even though im not using a site logo and not working
    i am using the navigation menu logo

    #666100
    Carl

    this worked πŸ™‚
    .main-navigation .navigation-logo{
    width: 400px;
    }

    yeehaa! celebrations
    thank you david

    #666103
    Carl

    new problem with same issue

    the height of my logo now elongates….

    i tried this but not work

    .main-navigation .navigation-logo{
    width: 400px;
    height: 40px;
    }

    #666142
    David
    Staff
    Customer Support

    Hi Carl,

    so instead, just set the height to 40px and the width to auto.

    BTW you still have this CSS in the Customiser:

    /*  GENERATEPRESS PRIMARY NAVIGATION */
    /* Define logo width */
    .site-logo {
        width: 140px;
    }

    Get rid of this or it will overwrite the CSS that you are applying elsewhere

    #666345
    Carl

    Hi David,

    Thanks for your insights so far. I do actually know a bit (not guru level πŸ™‚ ) of webdesign so am aware to keep the css clean and if something not working delete it.

    Seems to me there is a core issue with in the theme regarding the navigation logo (placing and sizing ) and it needs to be addressed as there are many threads in the forum where people all having issues with the navigation logo size.

    my site is https://www.carlbradbrook.com/

    when i inspect element for the navigation logo image in either sticky or static this is code:

    Carl Andrew Bradbrook

    So it seems it is header-image

    when I add this css to set the image size it just makes it smaller and IF i then use the customize settings menu-item-height adjustment it simply vertically elogates and distorts the image

    .header-image {
    width: 400px;
    height: 40px;
    }

    if i delete that css and add this css

    .main-navigation .navigation-logo {
    width: 200px;
    }

    It makes it slightly wider but still not the actual width and height and again distorts if i use the customise menu-item-height adjustment (adding height: 40px; to that snippet of css has no effect )

    Really appreciate a solution for this

    you can see from this screen shot (in orange) how i want the navigation logo to look (navigation logo showing as its original size)

    https://prnt.sc/kpfi94

    Many thanks πŸ™‚

    Carl πŸ™‚

    #666347
    Carl

    <img class="header-image" src="https://www.carlbradbrook.com/wp-content/uploads/2018/09/carl-bradbrook-logo.png" alt="Carl Andrew Bradbrook">

    #666441
    Carl

    Hi David,

    That’s an improvement πŸ™‚ Thank you

    The next thing is the alignment of the image.

    I want it to sit in a nice horizontal alignment with the menu items(menu tabs)
    At the moment the image is sitting higher than the horizonal line the menu items are on.
    So I want to bring the image down lower.
    What padding css should i be using to set the position relative to the menu items

    ALSO

    When I make the screen smaller there is a point at which the menu transitions to the mobile menu and the image shrinks smaller and looks disproporionate again.

    Is there a place to set the mobile menu attributes?

    Many thanks
    Carl πŸ™‚

    #667257
    David
    Staff
    Customer Support

    Hi Carl,

    you can add a margin-top property to that CSS. You’re using the mobile header so that logo is getting its size from the primary navigation > menu item height > mobile.

    The thing is, none of this should be required as the logos should just size to the navigation bar height. I think some of the problems are introduced because the need to down scale the png for sharper resolution.

    Personally i would look at using an SVG. Theres a good YT from one of our community that covers in detail:

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