Home Forums Weaver X Tutorials and Hints How to add logo to left of site title and tagline in header

This topic contains 9 replies, has 2 voices, and was last updated by  scrambler 17 hours, 22 minutes ago.

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #56674

    stlane
    Participant

    Can someone please help me add a logo to the left of site title and tagline in the header at https://www.yanawanaherbolarios.org/ to be somewhat similar to how the logo appears here:  http://www.sustainablesanantonio.com/

    I’ve somehow added the logo twice to the header and only meant to do it once, it’s also obviously too big and I’m not certain if I even did this correctly to begin with. Or, can somehow use a short code.

    Also, I’d like to have the slider to appear only on the homepage below the logo, title and tagline and don’t know if this should/can be done in the header or perhaps as a header widget.

    Don’t know if it matters but I’ve found the below Div code on the “Options: Header Area” (https://guide.weavertheme.com/options-header-area/) but am not certain if this even pertains to what I’m trying to accomplish.

    ERROR with [show_slider name=”header-images”]: You must specify a valid slider name.

    Hope I’m posting this to the correct forum. Any help would be much appreciated as you can see I don’t know what the heck I’m doing. ;o) Thanks much in advance for your help!

    #56683

    scrambler
    Moderator

    For the logo, try to select a Site logo in Customize > Site Identity > Select Logo

    and then we can check if we can use CSS to get the positioning the way you want it

    Did you add the slider using the header HTML replacement box?

    If so, If you have the “plus” plugin, you can use that option in the Page editing page > Xtreme Options for this page > Xtreme Plus > Header HTML replacement.

    If you do not have Plus, you can place the SLider shortcode inside a show_if shortcode with the post id of the page. Check the syntax in the Add-ons page with the help buble on the show_if line

    the show slider shortcode you mention has invalid syntx, there should be no quote around the name, and of course the name should be a valid slider name you created.

    #56755

    stlane
    Participant

    Thanks much for your help! Yes, I’m using Plus and recommended plugins except for Gutenburg. I was able to add the logo, however, I don’t know where to go to get the positioning to move the title and tagline left and closer to the logo. Can you please advise? https://www.yanawanaherbolarios.org/

    For the slider I used the Weaver Slider Posts plugin using the short code. The slider name/Shortcode is: [show_slider name=yanawana].

    I would like to extend the slider to the left and right edges, add text to the images and have them link to different sections of the website like it is here:  https://yanawanaherbolarios.com/

    My apologies, what I wrote about the “show slider name” I don’t believe applies to what we’re trying to do. And, I don’t know what you mean in regard to the “invalid syntx”, so it may be irrelevant?

    Again, thanks much for your help and please let me know if you need additional info.

     

     

     

     

    #56760

    scrambler
    Moderator

    To move the title and tagline left add the rule below in the Theme Global Custom CSS Rule box with the value you like

    .custom-logo-link {margin-right:1em;}

    To extend the slider in the header image are, go to Main Options > Header > Header Image > Align Header image and select Align Full

    WordPress does not have any way to associate a custom link to images, so if you want a slider with such images, you need to create it with post and place the image with the custom link as content of the post. Below is a post where I gave the detail procedure for that.

    https://forum.weavertheme.com/forums/search/slider+with+image+links/

    #56761

    stlane
    Participant

    Thanks, can you please advise?

    1. Where is the “Theme Global Custom CSS Rule box” located for input of .custom-logo-link {margin-right:1em;}? I’m sorry but I can’t seem to find it.
    2. My CSS skills aren’t much up to speed these days and since I’ll need to modify the provided rule you provided, can give an example of what is you’re educated guess of what you think it should be so I can play with it to be the value Iike and/or refer me to a good resource to learn?
    3. Also, in the Customizer I found settings in Spacing, Widths, Alignment > Header Area > Site Title and Tagline, and played with them but while it changed Title and Tagline spacing to what I wanted in the preview, the spacing never changed on the website after publishing. Is this not yet a true feature/functionality for Title/Tagline spacing and/or a feature related to Gutenberg? Or, something else?
    4. I also found similar Title/Tagline settings under Main Options > Header > <u>Site Title/Tagline,</u> are these the same settings? And if so, does one overrule the other, or are the synchronized and the last saved is what will be applied?
    #56762

    scrambler
    Moderator

    1)

    Customizer:
    Custom CSS > Global Custom CSS

    Legacy Admin:
    Main Options > Fonts & Custom > Custom CSS Rule box

    2) I don’t understand what you are saying. I gave you the Rule to use to set the space between the logo and the title / tagline (which is a right margin). Just put the rule in, then adjust the margin value to get more or  less space.

    3)- 4) irrelevant as you have a logo in place, the space is managed by the rule I gave you

    #56763

    stlane
    Participant

    Thanks for your help. I added the rule (copied, pasted, published) and it appears. And I’m able to adjust the Title and Tagline (as before) shifting them to the left to where I want them, clicked publish and are still the same as how I want them. However, when I view the page directly in my browser the title and tagline are not positioned as they are in the Customizer view. Am I missing something? Please reference the below screenshot of how the title and tagline appears versus on the frontend:  https://www.yanawanaherbolarios.org/

    #56764

    scrambler
    Moderator

    I cant speak for a difference between the customizer and the live site, but the rule is working, so you may want to be more specific about what you want.

    If you want the title tagline closer, set the margin to zero.

    But if what you want is for the title to move left more as to actually overlap the image rectangular are, then we need to do something different.

    The rule to move the title left over the image would be

    #site-title a  {margin-left:-20px;}

     

    #56781

    stlane
    Participant

    Yes, I want the title and tagline to move left over the transparent logo image.

    Does the #site-title a  {margin-left:-20px;} go in the Theme Global Custom CSS Rule box below where we earlier pasted this code?  .custom-logo-link {margin-right:1em;} Customizer>Custom CSS>Global Custom CSS?

    And do I need to do anything to separate these two scripts (or are they called shortcodes?) other than being on a line below the other provided previously? Thanks!

    #56783

    scrambler
    Moderator

    All custom CSS rules go in the same place.

    The rules can be placed in there, one after the other (separate line)

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

You must be logged in to reply to this topic.