Recent
Categories
View Replies (12)

Repositioning of logo and main menu

  1. Issue
0
Votes
Undo
  1. ip mann
    ip mann
  2. Sherlock Holmes
  3. Commercial Templates
  4. Wednesday, 27 December 2023
  5.  Subscribe via email
Hello!

I'm planning to redesign our school's website in J4 as the current version is overloaded in J3. Unfortunately, I only have minimal knowledge of CSS and need your advice for three adjustments in the "Natalie" template.

I would like to place the logo on the left and the main menu on the left, as shown in the image, but within the specified width of the template (1290 pixels).

In addition, I would like to insert an image into "Bottom1a" that seamlessly connects to the "Content-Bottom" and "Bottom-2a" at the top, bottom and also on the left, without any gaps.

The Awesome fonts are not displayed correctly in the frontend. ("Load custom.css" is set to "Yes". Do I have to download this icon separately, right?

I look forward to your suggestions and thank you in advance!
Attachments (2)
1.jpg 1.jpg
Icons.JPG Icons.JPG
Responses (12)
ciaran
ciaran
Love Fool Sherlock Holmes The Voice
Notable Answerer Notable Answerer
Accepted Answer Pending Moderation
0
Votes
Undo
Hello

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

Ciaran
  1. more than a month ago
  2. Commercial Templates
  3. # 1
ip mann
ip mann
Sherlock Holmes
Accepted Answer Pending Moderation
0
Votes
Undo
Hallo!

To move the logo to the center, I made the following adjustments in the Custom CSS and they work:

.logo {
position: relative;
display: inline-flex;
flex: 1.6 0 auto;
align-items: center;
padding: 20px 30px;
transition: all .2s ease;
justify-content: center;
}
.hornav {
display: flex;
margin-right: auto;
flex: 1 0 auto;
flex-grow: 1;
flex-shrink: 0;
flex-basis: auto;
}

Website: http://24.goedelgasse.at/
  1. more than a month ago
  2. Commercial Templates
  3. # 2
Sbocki
Sbocki
Accepted Answer Pending Moderation
0
Votes
Undo
Hi,
I'm also using Natalie J4 for our website. I had the same Issue with not displaying of the FontAwesome Font, with the following adjustments in the Custom CSS it works:

Cutom CSS um Font Awesome richtig anzuzeigen:

[class^="fa-"]::before,
[class*=" fa-"]::before {
font-family: inherit;
}

I hope it's helpful.
Regards Stefan
  1. more than a month ago
  2. Commercial Templates
  3. # 3
ip mann
ip mann
Sherlock Holmes
Accepted Answer Pending Moderation
0
Votes
Undo
Thanks for the help Stefan!
I also tried these code snippets. Unfortunately it does not work.

Best regards

I. Popp
  1. more than a month ago
  2. Commercial Templates
  3. # 4
ciaran
ciaran
Love Fool Sherlock Holmes The Voice
Notable Answerer Notable Answerer
Accepted Answer Pending Moderation
0
Votes
Undo
Hello

As Joomla 4 is now using FOnt Awesome 5, have you updated to the new markup for inline icons?

Eg. 

<i class="fas fa-wifi"></i>


Ciaran
  1. more than a month ago
  2. Commercial Templates
  3. # 5
ip mann
ip mann
Sherlock Holmes
Accepted Answer Pending Moderation
0
Votes
Undo
Hallo Ciaran!

Thank you for your message.

Unfortunately, inserting FontAwesome into the text doesn't quite work. As a test, I inserted 5 different icons, but only 3 of them are displayed.

I also installed the Natalie demo locally. Interestingly, not all icons are displayed correctly in the FontAwesome menu item.
Attachments (3)
FontAwesome in Natalie Demo.JPG FontAwesome in Natalie Demo.JPG
3 displayed icons instead of 5 inserted.JPG 3 displayed icons instead of 5 inserted.JPG
5 inserted icons.JPG 5 inserted icons.JPG
  1. more than a month ago
  2. Commercial Templates
  3. # 6
ciaran
ciaran
Love Fool Sherlock Holmes The Voice
Notable Answerer Notable Answerer
Accepted Answer Pending Moderation
0
Votes
Undo
Thank you

Could I ask you to provide a URL directly to an example of the icons that are not displaying for you correctly?

Ciaran
  1. more than a month ago
  2. Commercial Templates
  3. # 7
ip mann
ip mann
Sherlock Holmes
Accepted Answer Pending Moderation
0
Votes
Undo
Hallo!

The site is currently set up as a subdomain in order to redesign it in Joomla4.

https://24.goedelgasse.at/index.php/schule

The 5 icons should be on this page in the post. But only 3 of them have appeared.
And a “fas fa-home” doesn’t appear in the “Welcome” menu item either.

Thanks
  1. more than a month ago
  2. Commercial Templates
  3. # 8
dautrich
dautrich
Sherlock Holmes The Voice
Accepted Answer Pending Moderation
0
Votes
Undo
Possible reasons why two of five icons are not displayed:

  • The icon fa-meanpath is not part of Fontawesome 5.
  • The code for fa-lemon is syntactically wrong.

Free Fontawesome 5 icons can be searched here: https://fontawesome.com/v5/search?o=r&m=free
  1. more than a month ago
  2. Commercial Templates
  3. # 9
ciaran
ciaran
Love Fool Sherlock Holmes The Voice
Notable Answerer Notable Answerer
Accepted Answer Pending Moderation
0
Votes
Undo
Hello

Within your post, I only see the markup for 3 icons, each of which is been displayed Are the 2 other icons in the same paragraph?

Regarding the menu item icon, likewise I don't see the icon classes which suggests the classes are not set correctly, May I suggest sending temporary administration access to your Joomla installation to info@joomla51.com and we will examine this issue further. For our reference please paste a link to this post in your email.

Ciaran
  1. more than a month ago
  2. Commercial Templates
  3. # 10
ip mann
ip mann
Sherlock Holmes
Accepted Answer Pending Moderation
0
Votes
Undo
Sorry everyone!

It works. I tried with a non-existent icon and with an incorrect syntax,as Dautrich explained in his post.

Thanks!
  1. more than a month ago
  2. Commercial Templates
  3. # 11
ciaran
ciaran
Love Fool Sherlock Holmes The Voice
Notable Answerer Notable Answerer
Accepted Answer Pending Moderation
0
Votes
Undo
No problem... thank you for the update!

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


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