Unique headers above Nav Menu

Homepage Forums Pro Support Forum Blackoot Pro Blackoot Pro Support Unique headers above Nav Menu

Unique headers above Nav Menu

This topic contains 12 replies, has 2 voices, and was last updated by  Michael 1 week, 1 day ago.

Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • #21521
    Unique headers above Nav Menu

    Michael
    Participant

    Greetings and Salutations. First things first, love the Blackoot Pro theme. We’re in the process of adding some branding to our site and I’m attempting to make what I think will be a fairly simple alteration. The objective is to have unique headers for specific pages and to relocate the header above the Nav Menu. The idea being that the header will act as a “screen” by showing the title of certain pages.
    I found articles and forum responses that address moving the Nav Menu and I found (what I hope) will be the code to call specific headers for specific pages.
    The problem I’m facing after loading the header and moving the Nav Menu is that there appears to be extra space above the relocated header, I’m assuming this is residual real estate from the logo section.
    Do you have any ideas for how to remove the space so that the header will be immediately at the top of the page?
    And if you have any suggestions on how to implement the other changes I’d love to read any links you could provide.
    As always, I appreciate support and all the work you’ve put into your themes. Thanks.

    #21522
    Reply to: Unique headers above Nav Menu

    iceable
    Keymaster
    Support
    Happy with my help?
    Buy me a beer!

    Hi and thank you very much for the kind words!

    If you already managed to setup header as desired and spacing is the only remaining issue, this should be quick and easy to fix with a bit of CSS.

    Could you please point me to a page on your site where I can see this issue? I need to have a quick look to see exactly how you set it and what is causing it (and from there of course find how to fix it!)

    #21527
    Reply to: Unique headers above Nav Menu

    Michael
    Participant

    Hello, Sorry for the delayed response. I realized that I had not, in fact, learned how to move the header above the Nav Menu as I first described. My apologies. Evidently, when I was experimenting before I first wrote, I swapped the Nav Menu and the Logo- not the header with the menu. I was obviously confused and have pummeled myself about the head and neck as an act of contrition. After, I wanted to be sure I couldn’t resolve the situation myself before replying to you.

    So to recap, I would like to eliminate as much of the logo section as possible, and place the Nav Menu below the Header. My goal being, to use unique headers for certain pages and allow the header area to feel like a screen that responds to menu selections.

    I went and set up the new header on the site as per your request.

    On a side note: As I was researching a way to swap menu/header positions I came across the idea of System Font Stacks. If I were to implement one I assume I would list the two Google Fonts employeed on my site first, before what seems to be the typical “-apple-system” entry? Any light you shed on the issue would be greatly appreciated.

    #21533
    Reply to: Unique headers above Nav Menu

    iceable
    Keymaster
    Support
    Happy with my help?
    Buy me a beer!

    Hi, no problem for the delay 🙂

    So you want to get rid of the logo area, and move the “header image” above the nav menu.

    First to remove the logo area (and effectively get rid of the gap left if you just remove the logo), add this to your Custom CSS:

    #header { display: none; }

    Now to move the header-image above the nav menu will involve making some changes in your child theme.
    First of all please make sure you have a backup of your site. It’s easy to break your site while doing this so it’s crucial to have one you can restore just in case!

    You will need to edit two files: header.php and slider.php.
    If one (or both) is not in your child theme, you can copy it file from the parent theme and into the child theme (this needs to be done via FTP of FileManager).

    In header.php:

    Cut the block that generate the nav menu up to the last line of the fine (that’s 9 lines in total), they are near the end:

    ?><div id="nav-wrap"<?php ...
    ...
    ?></div><?php // End #nav-wrap
    
    ?></div><?php // End #header-wrap
    

    In slider.php, paste these lines after the very end of the file.

    And that’s it, the navbar is now below the header image!

    To have a different header image on different page I assume you already found a plugin that allows this? If not then there are several plugin with this exact functionality, so there’s no need to fiddle with the theme!

    System Font Stacks. If I were to implement one I assume I would list the two Google Fonts employeed on my site first, before what seems to be the typical “-apple-system” entry?

    Well this is up to you: do you want to use Google font first or the system font?
    Your visitor’s browser will take the font entries in order and try to render text with the first one that is available. If the first one is not available, then it will try the second, and so on.
    If Google font are first in the list, they will almost always be used (since they are loaded by the site itself, they should be available in most cases).
    If -apple-system is first in the list, then apple devices will use their own system font, and other devices that have no idea what that is will fallback to the next entry.

    #21538
    Reply to: Unique headers above Nav Menu

    Michael
    Participant

    Outstanding. Thank you very, very much. So excited to implement the changes, fingers crossed, Ha – haaa! Have a great day and have a merry holiday.

    #21541
    Reply to: Unique headers above Nav Menu

    Michael
    Participant

    Hey brudda, I seem to be having a problem setting up a slider.php in my child theme. I tried both copying the actual slider.php as well as creating a simple file with the <?php command by itself. Either way, after i add the new file to the child theme folder the header image disappears (along with the area alotted for the image). However, the header image still resides in the media library, and the customize/header option shows the header image as uploaded (the header doesn’t show in the customizer’s live edit preview either).

    The other code you gave me worked immediately, but right now I don’t have it in there. I’m using the logo area to hold the header image temporarily. And I appreciate the advice on the system fonts. Moving forward with that next.

    #21542
    Reply to: Unique headers above Nav Menu

    iceable
    Keymaster
    Support
    Happy with my help?
    Buy me a beer!

    Any file present in the child theme will be used instead of the file with the same name in the parent theme.

    slider.php in the parent theme holds the code that outputs the header image, so if you create an empty slider.php file in the child theme, then of course the functionality will disappear.

    However if you make it an exact copy of the file from the parent it should make any difference (unless it is modified, and/or maybe there is is a file permission issue)

    I recommend you do it one step at a time:
    – First copy slider.php from the parent in the child. Don’t modify it at all.
    – If the header image stops working, double check the permission for this file with FTP or FileManager (it should be 664).
    – Then move the code from header.php to the end of slider.php as instructed in the previous reply.

    If you keep having issues please let me know exactly at what point, it will make it easier to troubleshoot. I can also offer some more hands-on help if things won’t work as they should!

    #21545
    Reply to: Unique headers above Nav Menu

    Michael
    Participant

    Right? That’s how I thought it should work. I copy the slider.php in my FTP/file manager window, move it to the child theme folder, and then the header image disappears on the webpage but remains in the media library and in the small upload window on the customize page (*not* the Customizer Live Preview window, here, it is also missing from view).

    In thinking of all the possible wrinkles: My child theme does not have a functions.php file, not sure if that could be an issue. It contains a CSS file and a theme header.php. I had read a functions.php wassn’t necessary.
    As far as plugins are concerned: I have the Foobox Lightbox, Varnish HTTP Purge, UpdraftPlus Backup/Restore, the SEO Framework, and two SVG plugins: Menu Icons & SVG Support. Those last two plugins- I did try disabling them and uploading a new slider.php file but that did not resolve the issue.

    I don’t get it.

    #21546
    Reply to: Unique headers above Nav Menu

    Michael
    Participant

    AHHHHH! I found the problem sir. I’m such an idiot. For some reason there are two Blackoot pro themes in my WordPress set up: Blackoot Pro and Blackoot Pro 1.0.0. Blackoot Pro is the up to date theme but I kept copying the slider.php file from Blackoot Pro 1.0.0 thinking the number prefix indicated a newer version. I tried previously to delete the old Blackoot Pro theme but WordPress won’t allow it.

    So it works! Thank you very much for your time and your patience. You’re a king among men.

    #21547
    Reply to: Unique headers above Nav Menu

    iceable
    Keymaster
    Support
    Happy with my help?
    Buy me a beer!

    Ha! Yes indeed /blackoot-pro-1.0.0/ was the folder for the very first version (as you can tell) of this theme.

    It wasn’t quite perfect at this time and it didn’t include proper support for updates, so the folder just remained there while you had to download a separate copy of newer versions.

    You can delete this folder completely by the way.

    The current versions live in /blackoot-pro/, and the updates happen right in this directory – as they should!

    Thanks for reporting back and letting me know it is now okay on your end!

    #21686
    Reply to: Unique headers above Nav Menu

    Michael
    Participant

    Hey brudda, hope all is well on your end. I made those changes you suggested above and found a plug in to change up the header for specific pages, as per your suggestion. I’m very happy with the results. Thank you for walking me through it.
    Since then, I’ve been reading up on CSS and saw that I could use CSS code to replace the plug in. But when I tried to add the new code in the custom CSS field I keep get error messages.
    The code I was planning to use was .page-I’d-54 #header-image {background-image: url;}
    I’m not sure but I think the error may be because I previoisly added the custom CSS: #header-image{display:none;} in order to make the other changes mentioned above.
    Am I correct in assuming this is the source of my troubles? And if so, is it worth making the changes necessary to facilitate the custom header function without the plug in? I’m very happy with the set up as it is now, I was just looking to speed things up by eliminating a plug in.

    #21688
    Reply to: Unique headers above Nav Menu

    iceable
    Keymaster
    Support
    Happy with my help?
    Buy me a beer!

    I keep get error messages.

    Where do you get error messages and what are the errors?

    The code I was planning to use was .page-I’d-54 #header-image {background-image: url;}

    Not sur if this is a copy/paste error or if your code is exactly like this, but the single quote in the middle of .page-I’d-54 should probably not be there 😉

    I previoisly added the custom CSS: #header-image{display:none;}

    Well this hides the #header-image wrapper completely, so this make the previous snippet useless (not causing an error, but just not doing anything).

    If you want to display it on page 54, while keeping it hidden on other pages, you can add “display: block” like so:

    .page-Id-54 #header-image { display: block; background-image: url(URL_TO_THE_IMAGE); }

    is it worth making the changes necessary to facilitate the custom header function without the plug in?

    Probably not, especially if you are happy with the current setup. As the saying goes: “if it ain’t broke don’t fix it”.

    However if you are learning CSS and other stuff, this can still be an interesting exercise, and can certainly bring you the satisfaction of doing it yourself instead of having the plugin do the work (which is a good reason to do it in itself).

    I was just looking to speed things up by eliminating a plug in.

    Plugins are not slowing things down just because the are plugins. This is a false belief. (Many heavy plugins with tons of functionalities you don’t use is an unnecessary load which affects speed, but this is not exactly what we are talking about here!)

    When we are talking about a functionality you need and actually use, whether it is in a plugin, in the theme, or in your own customizations doesn’t actually matter: the load it causes is pretty much the same.

    In many cases a plugin is even a good option if you think about it this way: a plugin (that is actively maintained by its author) is like a third party library that keeps getting updates so you don’t have to worry about it more than hitting that update button. When you replace a plugin with your own custom code, then you have this additional code to maintain and update yourself when necessary!

    #21689
    Reply to: Unique headers above Nav Menu

    Michael
    Participant

    Shoot, sorry about the typos in the code snippet I presented above.
    As always, great support in timely manner. I really appreciate the advice. That’s a good point you made about the plug-ins being maintained for you.
    Yeah, I think I’ll continue to study CSS and practice but hold off from any major changes like this to our site until I’m more comfortable with the language (at least until I can type a code snippet properly 😆)
    Have s good day.

Viewing 13 posts - 1 through 13 (of 13 total)

You must be logged in to reply to this topic.


PayPal Verified
Secured by PayPal
Secure Credit Card payments powered by Stripe
SiteLock