-
Posts
-
I need help creating a header where I can place two logos side by side (left justified), add a phone number to the right, and make the menu below look similar to what I have comped up. Not sure if possible, but thought I’d ask. Thank you!
Sample:
Hi Jehu!
You can get the menu to display beneath the logo and centered in the header options, Dashboard > Enfold > Header.
For the extra logo and phone number you could try adding a widget area to your header, http://kriesi.at/documentation/enfold/adding-a-widget-area-to-the-header/, and then drag a text widget to it and add the HTML in for those elements. Let us know when your done and we’ll give you some CSS to position it.
Best regards,
ElliottI have followed the guid above to place a second logo into the header.
It works fine, when viewed in full viewport, but as soon as i start making the browserwindow smaller, the 1st logo, and the menu will start overlaying ontop of the 2nd logo.Is there a css trick to make them not float, but stay besides, or wrap down to be stacked vertically?
Hi!
Can you please post the link to your website so we can provide you an accurate custom CSS code?
Cheers!
YigitSure, since this is just a demo site for a potential customer, its currently hosted as a subpage on my site. Link is in private data.
Hi!
Please add following code to Quick CSS in Enfold theme options under General Styling tab
@media only screen and (max-width: 1300px) and (min-width: 990px) { .logo * { max-width: 77%; top: 10px; }} @media only screen and (max-width: 1300px) { #mobile-advanced, #advanced_menu_toggle, #advanced_menu_hide { display: block; } nav.main_menu { display: none; }}Best regards,
YigitNow it Works untill 990px, if smaller than that the second logo gets overlayed by the 1st logo.
Picture:http://bildr.no/view/YWM2Wm9DBelow 770PX, the second logo is pushed Down, that ok. But it floats above the other content (see this Picture)
http://bildr.no/view/ZXVvbXFEHey!
Do you mind creating a temporary admin login and posting it here privately so we can look into it?
Also, Please go to Enfold theme options > Header > Mobile Menu > Header Mobile Menu activation and choose 990pxBest regards,
YigitHi!
right now the account is a normal user account and we need admin access instead. Let us know when we can access your backend as admin.
However, I can’t see on your website what you are showing on your screenshots. This “bubble” picture is not there for me and we need to inspect this element to be able to provide you some CSS code.Cheers!
AndySorry, my bad.
Gave you admin rights now.
At the moment theres is nothing in the header widget, but you can insert a <img tag there to test.Hi!
I checked your website and your logo and header looks good to me. Could you fix it? or is the issue happening on a specific URL only? please show us where we can see the problem on your website.
Cheers!
AndyHi, the problem is like described and showed on the screenshots a few posts up. At the moment the image is removed from the widget area, because it was causing the problems. I wrote that you could add it again if you wanted to experience the problem. I’m am on my phone at the moment and can’t add the image from here.
It’s the widget area I the header that is not responsive, the position when on phone is interfering with the left (1st) logo.
Hi!
when I add an image to your header widget it looks totally different to your screenshot. That is why let us know when you are ready and when we can look into your issue with your widget header and inspect the elements.
Regards,
AndyAh I see. Its because we changed the header to “logo on the left, menu below”.
Still the problem is the same. The second logo doesnt get placed where it should, and it wrappes wrong when resizing browser image.I have added the correct 2nd logo now.
Hey!
thanks for adding the second logo to your header. When I shrink browser I can’t see any overlapping. Could you fix it?
Regards,
AndyYes, Ive been playing with the positioning. And by using negative margin I managed to make it stay a little more towards the top.
When we shrink the browser page the second logo disapears when going below 990px.I guess its because of this code?
@media only screen and (max-width: 1300px) and (min-width: 990px) { .logo * { max-width: 77%; top: 10px; }} @media only screen and (max-width: 1300px) { #mobile-advanced, #advanced_menu_toggle, #advanced_menu_hide { display: block; } nav.main_menu { display: none; }}Is it possible to not make it dissapear?
- You must be logged in to reply to this topic.