1. crimle
  2. Sherlock Holmes The Voice
  3. Commercial Templates
  4. Friday, 10 December 2021
  5.  Subscribe via email
Hi Ciaran

I bought «J51Layla - Joomla 4» these days. I would like the navigation to be placed on the side next to the logo. The white empty area is too spacious. See attachment.
2021-12-10-Naturpraxis-Stuber-Home.png
Is there an easy solution for that?

Thank you and kind regards
Chris
Attachments (1)
Accepted Answer Pending Moderation
0
Votes
Undo
Hi Chris

Would you have a URL to an example of your template header?

Ciaran
  1. more than a month ago
  2. Commercial Templates
  3. # 1
Accepted Answer Pending Moderation
0
Votes
Undo
Thank you Chris

To amend try adding the following to the Custom CSS field of your templates parameters (Extensions -> Templates -> [YourTemplateStyle] -> Custom CSS)....

#container_header {
display: flex;
}
.hornav {
justify-content: flex-end;
}


Ciaran
  1. more than a month ago
  2. Commercial Templates
  3. # 2
Accepted Answer Pending Moderation
0
Votes
Undo
Hi Ciaran

this does resolve the issue. I have taken the liberty to change your code as follows

#container_header {
display: flex;
}
.hornav {
justify-content: flex-start;
}

since there was far too much space between the logo and the navigation. In addition to that, the logo was at the very left end of the screen, outside the layout defined by the «Template Width». So I set a «X Position Offset = 200px» in the template settings. I hope this was right way of improving it.

Thank you and kind regards
Chris
  1. more than a month ago
  2. Commercial Templates
  3. # 3
Accepted Answer Pending Moderation
0
Votes
Undo
Looks good and thank you for sharing your solution :)

Ciaran
  1. more than a month ago
  2. Commercial Templates
  3. # 4
Accepted Answer Pending Moderation
0
Votes
Undo
Hi Ciaran

I would like to come back to this topic and I need to withdraw my solution mentioned above. Setting a «X Position Offset = 200px» in the template settings was not a good idea. This makes the position of the logo vary, according to the many different screen sizes. The reason for that might be: the Header (container_header) is defined «full-width». Here is my new solution

Set «X Position Offset = 0» in the template settings. Then

#container_header {
display: flex;
}

.hornav {
justify-content: flex-start;
}

div#header_main {
max-width: 140px;
}


On the other hand: the logo is still outside the template width. Well, I can cope with it, but it would be nicer if the logo position would respect the template boundaries and be flush to the left edge of the content.

Thank you and kind regards
Chris
  1. more than a month ago
  2. Commercial Templates
  3. # 5
Accepted Answer Pending Moderation
0
Votes
Undo
Hi Chris

There is no perfect solution with CSS alone as the markup of the header for this template is not ideal for the layout you are looking to achieve. You may have better luck using display: grid instead of flex. At least then you do not rely so much on having the correct markup.

Ciaran
  1. more than a month ago
  2. Commercial Templates
  3. # 6
  • Page :
  • 1


There are no replies made for this post yet.
Be one of the first to reply to this post!

Join Our Newsletter

* indicates required
We respect your privacy and do not tolerate spam and will never sell, rent, lease or give away your information (name, email, number, etc.) to any third party. Nor will we send you unsolicited email.
Joomla51 - Mullaghmore, Co. Sligo, Ireland
Joomla51.com is not affiliated with or endorsed by the Joomla! Project or Open Source Matters.
The Joomla! name and logo is used under a limited license granted by
Open Source Matters
the trademark holder in the United States and other countries.

We use cookies on our website. Some of them are essential for the operation of the site, while others help us to improve this site and the user experience (tracking cookies). You can decide for yourself whether you want to allow cookies or not. Please note that if you reject them, you may not be able to use all the functionalities of the site.

Ok