Adding a second logo that can also redirect to another website.

  • Resolved witk123

    (@witk123)


    5 years, 9 months ago

    Howdy,

    I’m a student researcher tasked with making a site for my professor and his lab. I only just recently converted to a child theme of Vega, as before I just used custom CSS as a workaround. 

    .navbar-custom .navbar-brand:after {
    content: '';
    display: block;
    width: 240px;
    height: 110px;
		
		position: relative;
		left: 0px;
		top: -45px;
		float:right;
		
  		max-width: 100%;
		background: url("https://www.gerakis-lab.com/wp-content/uploads/2019/05/TAMUAero.jpg") no-repeat;
    background-size: 100%;

    This is the code I used before to add a university Aerospace logo to the right of the lab logo, which itself is just an image file that says “Optical Probing and Manipulation”.
    The main header logo already redirects to the front page of the lab site, but I want to add an additional logo to the right that redirects to the university Aerospace department. What’s the right way to do this?

    Thanks for helping,
    Justin Witkowski

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)
  • Theme Author lyrathemes

    (@lyrathemes)

    @witk123 Thanks for trying out Vega, much appreciated.

    The best way to add the secondary logo would be to add a copy of the header.php file to your Child Theme and then edit it to add the required markup for the new logo.

    Hope that helps.

    Thread Starter witk123

    (@witk123)

    @lyrathemes

    Can you give specifics on how to do that? I’m not well versed in programming with regards to web pages. I know for the custom CSS you can put in a url for the image, but I see that the header.php will work differently than that. I’m thinking I add another “navbar-header” under “container”, but I don’t really know.

    Thanks again,
    Justin

    Hello @witk123 ,

    Welcome and thanks for posting your question.

    After you create your child theme and duplicate the header.php file on the new folder, open the file header.php and search for the following code:

                <!-- Logo -->
            <div class="navbar-header page-scroll">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"><i class="fa fa-bars"></i></button>
                <?php get_template_part('parts/header', 'logo'); ?>
            </div>
            <!-- /Logo -->

    Before or after that (it will depend on where you want your logo), you can add the following new HTML code:

    <div class="second-logo"><img src="[LOGO URL]"></div>

    This will give you the basics for adding it, now you can add the CSS you want to adjust it at your will.

    Please let me know if you have any questions.
    Kind regards,
    Diego

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Adding a second logo that can also redirect to another website.’ is closed to new replies.