Hi,

I have three special pages on the website where the client wishes to have custom logos besides the main header logo. I have tried the following:

1. Installing Sticky Anything plugin and passing the custom css name from salient over to this plugin but this does not work since the Single Image container is nested in several other wrappers and containers and I don't want to edit the theme files just for this to work as I am worried it might break other functionalities.
2. Installing Zen Logic Menu plugin, enabling this on the three special pages, however, this does the trick of displaying a custom menu in place of the header menu,  but this is not what I am looking for since we do not have a custom css handle to change the menu link to an image

I'd appreciate if you let me know how can i achieve this using the elements within the theme and through basic CSS?

EDIT

Using the second method I have finally achieved this!

You can add custom css classes in wordpress' native menu creation. You just have to enable the option from screen options at the top!

So here's what I have done for anyone that's interested:

1. Install Zen Logic Menu plugin and activate it
2. Go to it's settings and specify where do you want the custom menus to appear, by default it should show you top_nav, which is fine
3. Create a custom menu under Appearance > Menus and save it
4. Add a menu item and define a class name
5. You cannot leave the navigation label blank, instead I added a dot (so that I can change it's colour to match the header background)
6. Save your new custom menu
7. Go to the special page you wish to have a custom menu and scroll at the bottom of the page
8. Change the menu radio button to your custom menu
9. Using the class name from step 4 you can control this like any other HTML item under Salient > General Settings > CSS / Script Related
10. I have the CSS as follows:
    .my-logo {
    position: absolute !important; top: 0; left: 0; margin-top: 15px !important; margin-left: 250px !important; width: 232px !important; height: 109px !important; background-image: url("my-image.png"); background-repeat: no-repeat;
    }

I, however, cannot seem to get the colour of the dot (navigation label) changed!!

No matter what I do a dynamic-combined css file overwrites everything.

Appreciate any help please

Hi Tahir,

I have tried that as well now.

However, it doesnt seem to change the color for the <a> links in the custom menu.

Here's how my CSS looks like:

.bespoke-logo, .bespoke-logo-andbeyond, .bespoke-logo-singita {
    position: absolute !important;
    top: 0;
    left: 0;
    margin-top: 15px !important;
    margin-left: 250px !important;
    z-index: 99999 !important;
    width: 232px !important;
    height: 109px !important;
    background-repeat: no-repeat;
    background-size: 200px 77px;
    color: #116567 !important;
}
.bespoke-logo a, .bespoke-logo-andbeyond a, .bespoke-logo-singita a {
    color: #116567 !important;
}

Hi Tahir,

Sorry about that - please find below the URL where the dot (navigation label) is still white:

https://bespokegetaway.com/mbali-mbali/

You can see this just besides the added logo in the top header

Hi Tahir,

I have already explained below in the thread (where I have outlined the steps) what I have done and what help I need.

However, I might not have been clear, for which I apologize.

Please see the attached screenshots.

I have created a custom menu using Zen Logic Menu.

This is because I want a custom logo to appear on 3 special pages, besides the main logo, in the header of these 3 special pages.

Since wordpress does not allow you to create blank links, I have created a link with a dot and given this a custom css

Using this css selector I have added the logo using my own CSS

However, no matter what I do I cannot change the color of the white dot to the same color as the header, so its hidden

I hope my screenshots help illustrate the problem further

Haha! :D

Quite the trick there.

Thank you for the help, Tahir - appreciate it.

Is there a way not to let custom logo wrap within the mobile menu ?

Please see attached screenshots

It would be best if it can always stay besides the logo on mobile as in the desktop view.

Thank you Tahir.

I have hidden the logo from mobile view.