- This topic has 12 replies, 2 voices, and was last updated 5 years, 6 months ago by David.
-
AuthorPosts
-
September 1, 2018 at 7:18 am #665943Carl
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
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
September 1, 2018 at 8:39 am #666043DavidStaffCustomer SupportHi 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 π
September 1, 2018 at 8:56 am #666053Carldoesnt 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’September 1, 2018 at 9:00 am #666054Carljust a thought….
is there css to have the logo 400×40 sho in its actual size regardless of the menu item heightSeptember 1, 2018 at 9:50 am #666083DavidStaffCustomer SupportYou have this CSS still in there:
.site-logo { width: 140px; }
You could just change it to 400px.
September 1, 2018 at 10:14 am #666097Carlok tried that even though im not using a site logo and not working
i am using the navigation menu logoSeptember 1, 2018 at 10:16 am #666100Carlthis worked π
.main-navigation .navigation-logo{
width: 400px;
}yeehaa! celebrations
thank you davidSeptember 1, 2018 at 10:19 am #666103Carlnew 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;
}September 1, 2018 at 11:51 am #666142DavidStaffCustomer SupportHi 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
September 1, 2018 at 9:19 pm #666345CarlHi 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:
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)
Many thanks π
Carl π
September 1, 2018 at 9:21 pm #666347Carl<img class="header-image" src="https://www.carlbradbrook.com/wp-content/uploads/2018/09/carl-bradbrook-logo.png" alt="Carl Andrew Bradbrook">
September 2, 2018 at 1:41 am #666441CarlHi 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 itemsALSO
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 πSeptember 3, 2018 at 3:11 am #667257DavidStaffCustomer SupportHi 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:
-
AuthorPosts
- You must be logged in to reply to this topic.