Responsive logos in Navbar

Support
#1

Hi there,

I’ve been trying to make some logos that I have in the navbar.php file responsive with no success at all. I tried to use media queries to make them responsive, but it doesn’t work. Could you please help me with this?

With your assitancce, I managed to create a DIV for the sponsors’ logos. But now I have the problem of them not being responsive. So, my question if I can use media queries for that matter or what should I do?

This is the PHP file I changed with your assistance:

<?php // ============================================================================= // VIEWS/GLOBAL/_NAVBAR.PHP // ----------------------------------------------------------------------------- // Outputs the navbar. // ============================================================================= $navbar_position = x_get_navbar_positioning(); $logo_nav_layout = x_get_logo_navigation_layout(); $is_one_page_nav = x_is_one_page_navigation(); ?> <?php if ( ( $navbar_position == 'static-top' || $navbar_position == 'fixed-top' || $is_one_page_nav ) && $logo_nav_layout == 'stacked' ) : ?>
<?php x_get_view( 'global', '_brand' ); ?>
<?php do_action('wpml_add_language_selector'); ?>
<?php x_get_view( 'global', '_nav', 'primary' ); ?>
<?php else : ?>
<?php x_get_view( 'global', '_brand' ); ?> <?php x_get_view( 'global', '_nav', 'primary' ); ?>
<?php endif; ?>

I want to make the logos responsive. I tried this approach:

@media (max-width: 480px) {
.x-logobar#logo-columna-2.x-img.eda-logo {
width: 10%;
}
.x-img.das-logo {
width:10%;
}
.x-img.mintec-logo {
width:10%;
}

}

But it didn’t work.

Instead of having this:

I’d like to have the bottom logos smaller and in one horizontal line.

Could you please help me?

Regards,
Jose Luis

#2

Hello Jose Luis,

Thanks for writing in!

Do you want something like this?

Well in that case, please update your image code and use this instead:

<div class="responsive-logos">     
	<img src="http://www.caq.edu.ec/wp-content/uploads/2018/12/logo_eas-H163.png" class="eda-logo">
	<img src="http://www.caq.edu.ec/wp-content/uploads/2018/12/logo_DAS_500_h163.jpg" class="das-logo">
	<img src="http://www.caq.edu.ec/wp-content/uploads/2018/12/MINT-Logo-H223.jpg" class="mintec-logo"> 
</div>

And then use this custom css:

.responsive-logos img{
    max-height: 55px;
    margin-right: 15px;
}

@media(max-width: 767px){
    .responsive-logos img{
        width: 30%;
        height: auto;
        display: inline-block;
        float: left;
        margin: 0;
        margin-left: 4%;
    }

    .responsive-logos img:nth-child(1),
    .responsive-logos img:first-child{
        margin-left: 0;
    }
}

We would loved to know if this has work for you. Thank you.

#3

Hi,

I did as you asked, but I ended up with this in the mobile version. For some reason, media queries are not working>

Help!

And, is there a way to have the laguage selector on top of the main logo?

#4

Hi There,

The div contains the images doesn’t have the `` class:

Please update it to:

<div class="responsive-logos">     
	<img src="http://www.caq.edu.ec/wp-content/uploads/2018/12/logo_eas-H163.png" class="eda-logo">
	<img src="http://www.caq.edu.ec/wp-content/uploads/2018/12/logo_DAS_500_h163.jpg" class="das-logo">
	<img src="http://www.caq.edu.ec/wp-content/uploads/2018/12/MINT-Logo-H223.jpg" class="mintec-logo"> 
</div>

Then update the custom CSS to this:

.responsive-logos img{
    max-height: 55px;
    margin-right: 15px;
}

@media(max-width: 767px){
    .responsive-logos img{
        width: 30%;
        height: auto;
        display: inline-block;
        float: left;
        margin: 0;
        margin-left: 1%;
    }

    .responsive-logos img:nth-child(1),
    .responsive-logos img:first-child{
        margin-left: 0;
    }
}

Hope it helps :slight_smile:

#5

Sorry, I already did it, exactly the way you suggested, but it didn’t work. That’s why I went back to my original approach with the original navbar.php file. I did this in order to avoid the large logos in the mobile version as I get a definite solution. I’ll change the div again, but my point was that I implemented the media queries you suggested, but it didn’t affect the logos in the mobile version.

Does it something to do the fact that I already used some media queries for other items before in my Custom CSS?

Please, I need to fix this as soon as possible.

#6

I tried it again and it worked. Thanks a lot. Sorry for any inconvenience. I must have done something wrong yesterday.

Greetings,
JL

#7

Hi JL,

You may check these links for reference:

Cheers!

#8

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.