2 Logos in Header: Page 2 - Support Central

2 Logos in Header

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;
}
}

sperlingjacobi

Hi titebite,

disable css compression . I'm sorry, but I do not know where I could turn off the css compression. I have no other template or framework installed. In JA Builder I can not find any settings for it.

teitbite

sperlingjacobi Hi. Than it has to be some 3rd party plugin if development mode is activated for template. I cannot tell what solution has been installed either. I believe the most popular is JCH optimization plugin, but I really haven't heard about others.

Anyway have You tried to add my code, compression should be refreshed on cache clear, so You may try it already.

sperlingjacobi

Position of the logos is great now. Unfortunately, the Hamburger menu does not work if you tip on it.
Do you have an idea for this? Many, many thanks!

teitbite

sperlingjacobi Hi. I see. Add this to css as well:

@media only screen and (max-width:991px) {
.jub-block .jub-element.spacing-left-none.text-right {
    position: absolute;
    top: 60px;
    z-index: 20;
    background: #111;
    width: 230px;
    right: 0;
}

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

sperlingjacobi

Hi, thank you, that looks good! In Firefox Developer Tools Size checking is all great. On real iPhone 6, 5SE the menu unfortunately does not open. Does it need some special codelines?

teitbite

sperlingjacobi Hi. It does not. Try bigger z-index number, up to 99. But most likely it's cache of browser not releasing changes still. Try refresh it 4-5 times.

sperlingjacobi

I'a m sorry but Scale up z-index did not help. I have also disabled the animation on the right logo and also the slideshow. Both gave no other result. Maybe a screenshot helps, what can be seen on the phone. I deleted the cache several times. The menu does not work on iPhone 6 and iPhone 5SE.

sperlingjacobi

I transferred the website to another server with akeeba backup. Some settings were not saved. Wrong colors. Wrong font.
It is not the first time the settings are not transfered.
Well, i recovered all. In this process,I found out that the problem was with the second logo.
The topic can be closed. Many thanks for your support.

Below is the CSS code

.jub-block .header .navbar-toggle .icon-bar{
    background-color: #fafafa;
}

@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;
}

ul.nav.menu.mod-list li {border-bottom:1px dotted #CCC; }

.jub-block .jub-element.spacing-left-none.text-right {
    position: absolute;
    top: 60px;
    z-index: 99;
    background: #111;
    width: 230px;
    right: 0;
}

.jub-block .collapse.in .jub-element.spacing-left-none.text-right {
    display: block;
}
.jub-block.header-1 .header .navbar > div > .row {
    display: block;
    position: relative;
}

}

@media only screen and (min-width: 992px) {
div.jub-media-img.z-depth-.haasgebr { margin-top:-40px;float:left;} 
}

« Previous Page