- This topic has 19 replies, 3 voices, and was last updated 6 years, 8 months ago by Tom.
-
AuthorPosts
-
July 6, 2017 at 4:04 pm #345302NBC
As I understand this article, the process applies only to an individual page.
How does one set up an entire site this way (referring only to the positioning of logo and main navigation), presuming that the logo is a PNG file?
July 6, 2017 at 9:01 pm #345389LeoStaffCustomer SupportHi there,
Doesn’t look like you need to merge to get that similar look.
Try uploading the logo in Customizer > Site Identity and set the navigation location to float right:
https://docs.generatepress.com/article/navigation-location/Let me know if this helps.
July 7, 2017 at 1:10 am #345466NBCI’ve tried that (float right navigation) before and do not care for the way it looks.
At present, the menu contains only one item. Set to float right, the menu bar disappears except under the menu item itself and the hover states no longer function. The menu starts at the extreme right edge of the screen even though it only contains one item.
I turned off header padding, but that doesn’t help.
I’m trying to get the menu to start to the right of the logo, not all the way to the right of the screen.
(I wish there were an easy way to make use of the giant blob of white space that appears in the header with a larger logo.)
July 7, 2017 at 1:16 am #345470NBC. . . and I tried this, but that puts the menu immediately to the right of the logo (too close), and the header bar color problems persist.
July 7, 2017 at 8:51 am #345623LeoStaffCustomer SupportWe can use the CSS here:
https://generatepress.com/forums/topic/menu-placement/#post-337478Then add some left padding to push it away from the logo:
@media (min-width:769px) { .main-navigation { padding-left: 100px; } }
July 7, 2017 at 9:38 am #345650NBCI’ve incorporated the two pieces of code into my child theme, but the only effect is on my sticky menu, the content of which now indents at left.
July 7, 2017 at 9:39 am #345652LeoStaffCustomer SupportAny chance you can link me to the site? Thanks!
July 7, 2017 at 1:16 pm #345759NBCSorry, it’s on my localhost development server.
Maybe this is the cosmos’s way of telling me to leave the white space next to the logo. ๐
July 8, 2017 at 12:43 pm #346129NBC(Still trying to figure this out.) Did you mean these settings to apply with the menu set to float right?
I get a stump of a menu all the way at the right edge of the screen, and a void between it and the logo.
Bear in mind that I also have a sticky menu with logo.
I just wanted to put the menu to the right of the logo and not lose almost all of the width of the menu in the process.
July 9, 2017 at 12:07 am #346286TomLead DeveloperLead DeveloperAnd you’ve tried this CSS?: https://generatepress.com/forums/topic/menu-placement/#post-337478
And this CSS?: https://generatepress.com/forums/topic/merging-page-header-and-site-header-without-page-specific-steps/#post-345623
Unfortunately it’s hard to help with this kind of stuff without seeing the actual site – a lot of it is guess-work.
July 9, 2017 at 1:27 pm #346586NBCHi, Tom:
This took some doing, but I’ve set up a duplicate of the site online and e-mailed you the link through Contact so you can see my ugly menu.
BTW, really love the new GP logo and icon! On your brand-assets page, you might want to consider labeling the capitalization of GeneratePress as camel case.
July 9, 2017 at 9:00 pm #346747TomLead DeveloperLead DeveloperHere’s what I get with the following CSS added: **
.nav-float-right .inside-header .main-navigation { float: none; display: inline-block; vertical-align: middle; } @media (min-width:769px) { .main-navigation { margin-left: 100px; } }
Is that somewhat close to the look you’re wanting? If not, do you have an example look you’re going for?
Glad you like the logo! We do mention the spelling at the bottom, but perhaps I should label it as camel case ๐
July 10, 2017 at 3:30 am #346874NBCThe menu’s too narrow. I was hoping to mimic the look of the “below header” positioned menu set next to the logo. I realize the menu would grow wider with more items added to it, but the other full-width positions give it some balance even when the menu contains few items.
Could I trouble you to delete that image you posted? I don’t want anyone else to see what I’m working on. That’s why I didn’t want to put this online in the first place.
July 10, 2017 at 10:53 am #347143TomLead DeveloperLead DeveloperAh, so the entire menu background color extends to the edge of the header?
Unfortunately something like that wouldn’t really work CSS-wise.
Have you considered using the navigation as the header?: https://docs.generatepress.com/article/navigation-logo/
July 10, 2017 at 11:08 am #347150NBCHi, Tom:
The logo would have to be really small to set in the menu bar. That works well with horizontal logo designs, but mine’s not going to fit well and still leave the type readable.
I wound up setting up the site to use a left sidebar and added the logo to it with a widget.
I thought about placing the navigation system in the sidebar as well (below the logo), but the menu always appears first, regardless of how I add it there. I tried using dual widgets (image + custom menu), but no matter how I ordered the widgets, the menu appeared first.
The main issue that prompted all this back-and-forth was the big void that appears in a header next to a tall, wide logo.
(BTW, the only reason I suggested adding “camel case” to your brand-assets description is that that’s what designers and typesetters call a mid-word capital letter.)
Thanks again to you and to Leo for all your help.
-
AuthorPosts
- You must be logged in to reply to this topic.