2 Logos in Header

sperlingjacobi

Hi there,
I use header 1.
And i need 2 Logo in the header with seperate url. How can I change the code, because there is no template for it.

teitbite

sperlingjacobi Hi. In tempalte settings You will find a layout with module positions mentioned, You should use one of the module positions closest to the current logo to add another one. Can You provide a link and joomla panel acces, so I will be able to assist more?

sperlingjacobi

Thanks for the support!
I had already inserted the logo via a module. Unfortunately, it is not displayed in the responsive view of Tablet and Phone. It should always be visible like the company logo.
Currently I am working offline, so I can not send a link.

teitbite

sperlingjacobi Hi. Please leave this module there and show me the page when it will be online. I'll help You to keep it in place, but need to see it first.

sperlingjacobi

The URL is in the attached file:

The first logo stays correctly in the left corner. But in responsive mode, the second logo disappears.
The look should be in responsive like this:
1st logo, 2nd logo and on the right the Hamburger menu

teitbite

sperlingjacobi Hi. I'm afraid this link is showing as "Access denied", do You have any firewall enabled on the server or country IP restriction? Can You please enable Poland, so I'll be able to check this issue?

sperlingjacobi

Will you please try it again. Thank you

aman204

sperlingjacobi Hi

The htaccess login details arent working for me too. Kindly re-check

You may also whitelist - IP - 103.235.167.23, Country - India

sperlingjacobi

Thank you. I hope you can have a look now.

aman204

sperlingjacobi Try add this to custom styles of JA Builder :

@media (max-width: 992px){.jub-block .header .navbar-collapse.collapse, .jub-block.header .navbar-collapse.collapse{display:block !Important;}}

Kindly ensure to clear your browser cache if changes dont reflect.

sperlingjacobi

Thank you very much for the fast support!

The rectangular logo is now visible.

But another problem is, that in the mobile view, I would like to have the two logos in a row. Unfortunately I did not get any further with "float:right" of the brand logo.
I uploaded a sketch where you can see what I mean.
Could you please give me additional help. Thank you in advance.

teitbite

sperlingjacobi Hi. Again I would have to see it to be able to answer to that question. Have You checked if it's not locked for Poland IP related users?

sperlingjacobi

The website is accessible without login now. No password not blocked.

aman204

sperlingjacobi The website is accessible without login now. No password not blocked.

The site isnt accessible for me too currently as it is returning with 403 - Forbidden error. Kindly check

sperlingjacobi

Please visit again. Above you can see a picture from previous posts. The logos should be next to each other and right side the Hamburger menu.
Thanks a lot.

aman204

sperlingjacobi Hi

Your site is accessible now

Can you also add your admin details in edit fields in order for us to take closer look and enabling to provide concrete solution

For reference, You can follow thread post (5 point) procedure.

sperlingjacobi

I added admin access.
I also placed the extension smart slider3 under the header. On the Desktop it looks good. On tablet and Phone, it does not seem right.

aman204

sperlingjacobi Try change the above CSS with addition of few more CSS rule-sets :

@media (max-width: 992px){.jub-block .header .navbar-collapse.collapse, .jub-block.header .navbar-collapse.collapse{display:block !Important;}
div.col-md-2.header-top.clearfix,.jub-block .header .navbar-collapse.collapse, .jub-block.header .navbar-collapse.collapse{    float: left !important;}
}

sperlingjacobi

Unfortunately, everything does not work. When I enter the css-code (above), the menu in the mobile view is opened, without having clicked on the hamburger menu. See another picture attached.

.jub-block .header .navbar-toggle .icon-bar{
    background-color: #fafafa;
}
div.jub-media-img.hvr-grow.text-left.z-depth-.haas-logo { margin-top:-30px;} 

@media (max-width: 992px){
	ul.nav.menu.mod-list li {border-bottom:1px dotted #CCC; }
}

teitbite

sperlingjacobi Hi. First of all please disable css compression and try add this to css:

@media only screen and (max-width:991px) {
.jub-block .header .navbar-collapse.collapse, .jub-block.header .navbar-collapse.collapse {
    display: block !important;
}

.jub-block .jub-element.spacing-left-none.text-right {
    display: none;
}

.header-navbar {
   position: absolute;
   top: 17px;
   left: 115px;
}

.jub-block.header-1 .header .navbar > div > .row {
    display: block;
    position: relative;
}
}