Joomla Templates Club 406,261 posts

[carolinew Friend carolinewJoin date: March 2016Posts: 12Downloads:52Uploads:4 Thanks: 2]

#928902

Dear Pavit,

I have added the logo as a transparent image in the header in position acm so that it overlaps the image bellow on the Home page. I have added the masshead bleu band so that the logo overlaps it on all the other pages. I have resized the logo to 3 different sizes to fit screen width via the custom.css file.
However I cannot manage to properly display the horizontal menu when it is not collapsed, neither can i display properly the masshead title. Both "slide" underneath the logo instead of staying to the right of it unless the screen is very wide.

Also the masshead title has now a margin-left of 150px (I have add it as a possible solution to the alignement problem) and I cannot remove it anymore: I have removed the line on the less file, then compiled less to css but no it is still there… (done this a few times). I also tried to play with masshead margin-left in the custom.css file with no success, it only stopped the logo image resizing, so I edited and removed the corresponding lines:

@media (min-width: 220px) and (max-width: 379px)
{.logo-image img{height:102px;width:70px;}}
@media (min-width: 220px) and (max-width: 379px)
{.masthead .jamasshead .jamasshead-title {margin-left:0px;}
@media (min-width: 380px) and (max-width: 1023px)
{.logo-image img{height:218px;width:150px;}}
@media (min-width: 1024px)
{.logo-image img{height:437px;width:300px;}
@media (min-width: 1024px)
{.masthead .jamasshead .jamasshead-title {margin-left:250px;}

Once again, thank you in advance for your advise and your help,
Best,

[pavit Moderator pavitJoin date: September 2007Posts: 15749Downloads:199Uploads:2274 Thanks: 417 Thanked: 4028 times in 3778 posts]

#929021

Hi

I’m sorry but i cannot understand well which type of layout are you trying to achieve

Can we proceed to solve one issue at once ?

Please post a screenshot that shows how the layout should be and where is the problem you are encountering.

[carolinew Friend carolinewJoin date: March 2016Posts: 12Downloads:52Uploads:4 Thanks: 2]

#929401

Thank you for trying to understand. This is really double problem:

1-Ja-masshead title is not responsive, font does not get smaller when the sreen does (plus I have added a left-margin of 150 px to it which I cannot manage to remove anymore)

2-the horizontal menu does not fit next to the logo on medium screen (when not the menu is not collapsed), it wraps underneath it

Please see attached screen-shot with explanatories names.

Thanks a lot.

---

Attachments:

1. 
2. 
3. 

[pavit Moderator pavitJoin date: September 2007Posts: 15749Downloads:199Uploads:2274 Thanks: 417 Thanked: 4028 times in 3778 posts]

#929498

Hi

1-Ja-masshead title is not responsive, font does not get smaller when the sreen does (plus I have added a left-margin of 150 px to it which I cannot manage to remove anymore)

I can see it correctly on my browser it resizes on all devices in the correct way, you added the margin-left:150px in this file /templates/uber/local/css/themes/cretehorizon/template.css line 5684

.masthead .jamasshead .jamasshead-title {
  font-size: 56px;
  margin-top: 0;
 margin-left: 150px; 
  font-weight: 400;
  z-index: 2;
  position: relative;
}

2-the horizontal menu does not fit next to the logo on medium screen (when not the menu is not collapsed), it wraps underneath it

Your logo image is too large you should use a smaller logo that cover in the right way left space

[Author]

Posts