I am brand new to Backlight and have spent about 2 weeks experimenting with the design elements. One issue I am having is trying to get both a Logo and my Menu (horizontal nav) to show up in the Header section. I want the Logo on the left, which is working, and I want the Menu on the right, which is not showing up. I do not believe there are any default settings in the Page, Colors, etc sections that might be hiding the menu.
Is it possible to have multiple elements in the Header? I’d ultimately like to have my Logo, Menu, and Social Media icons all in there.
I think you’ll need to use phplugins and custom css to achieve what you’re after.
From the designer, Social media icons only appear in the top pallet.
When the Navigation is place in the header, it will always be below the masthead if you also have the masthead in the header.
One way to come close, is to place the navigation in the Top Pallet and use phplugins to replace the Top Pallet Title with a logo and disable the Masthead. I’m not sure if it’s possible to make the Top Pallet tall enough to accommodate your current logo.
Regardless, you’re looking at using phplugins and custom css to get all three elements (logo, navigation, and social media) in the same section.
You can make the social media icons appear in the masthead area if you set the Top Pallet to “Has Height on Desktop: No”. This setting will not show the pallet’s background color but the social media icons can appear at the same height as the logo.
But getting the navigation in there too would be tricky and would require custom coding.
Thanks! I did this for now, accepting the default layout. I’ll fool around with coding once I get more experience. I made a new logo because you are correct in that not only was my logo too large for the minimalist presets, it was also just too large in general and I found a better font. So, thanks for the comment about the logo, it really made me examine what I was doing.
Now I need to search for advice for adding fonts and getting the social media icons to look the way I want. I want to add the font Optima, and I need advice on how to get the social icons looking the way I want. I don’t want to derail this thread, so I’ll search and if I can’t find what I need, I’ll start a new thread for each topic.
Circling back on this topic. Going to brave an attempt at PHP and CSS, but have a few newbie questions before I jump.
I followed Matthew’s advice, which gave me a look close to what I ultimately wanted, but when I scroll, the top pallet stays in place and the masthead scrolls by. I now want everything…logo, navigation, and social media icons…in the top pallet. I have a question about the most efficient way to do that. A new friend of mine who turned me on to TTG/Backlight got his logo into the top pallet by first specifying his logo image in the masthead_pallet_top class within the function pallet_top_title(), then using CSS to grow the height of his top pallet and force the logo to the left of the top pallet. I have also just read Rod’s post https://backlight-2-100.barbeephoto.com/top-pallet-logo-background/, and I’m wondering which method is the most efficient/appropriate.
Also, in the phplugins-pangolin-sample.php, there is note in the function pallet_top_title() example that says the top pallet is a fixed 48px height. Does that refer to a default height as the designer is set up, or can that be increased? I’d like an 80px height.
Finally, when I activate CSS and PHP in my template, there is a choice of 2 files in the CSS selector and three files in the PHP selector. Does one of these have to serve as the basis of my own custom CSS or PHP file or can I start with a blank file for each and only use the code I need? Is there anything in the files in those choices that must be included in my own custom-named CSS and/or PHP files?
First, you need to start with the phplugins-pangolin-sample.php file. I would use save-as and give it a new name, but that’s up to you.
You can start with a blank file for css, just do all your coding in a text editor and save as a .css file.
You can delete the sample functions if you wish (those functions in the user area), but you should keep everything above that.
I’ve placed a logo inn the top pallet using both methods, I don’t know if there’s an advantage to either.
I don’t think that the top-pallet height needs to be a fixed height. But if you change it with css be sure to put the css in a media query otherwise the mobile version will be 80px high too. It’s worth experimenting with though.
The fixed 48px height is a design choice. If you make it larger, than that’s more vertical real estate lost for content, which may or may not be an issue for you. Be sure to keep mobile visitors in mind when you make design changes.
