Can we change the header in Charm template to fit all my menu items?
By Sean Carney on Thursday, 06 December 2018
Posted in General
Likes 0
Views 799
Votes 0
I am working on a redesign for our site at drcarney.com and am hoping to use the Charm template, otherwise I may try to use another Helix Ultimate template. But, I am so close to having the Charm template workable for me. :-)

Here is the issue. I need to display better (longer and more descriptive) menu headings that what I currently have and I want them to all on one line. I am thinking that with the Charm template I could do this except that the logo area is too wide. And the menu area is not wide enough. I may also need to remove some padding between the menu items.

I am attaching a mock up of how the Charm template looks now with the proper Menu headings (the menu wraps to another line)

I am also attaching a photoshop mockup of how I would like the logo and menu items to look.

Can you tell me how much work it is and how I might be able to achieve what I am looking for?

Thank you, Sean Carney
The attached image is a mock-up of how I would like to have the site looking
Sean Carney
·
Thursday, 06 December 2018 04:23
·
0 Likes
·
0 Votes
·
0 Comments
·
The attached image is how the site looks after I changed the menu items to be more descriptive than they are on the present site. The problem is that the menu items are wrapping.
Sean Carney
·
Thursday, 06 December 2018 04:24
·
0 Likes
·
0 Votes
·
0 Comments
·
Hi there,

I have applied css code below on your charm template custom.css files and it should shown as it should now. Please give it a check and see how it goes.

[gist type="php"]
/* Inline menu items */
.sp-megamenu-parent {
position: fixed !important;
padding-right: 30px !important;
}
[/gist]
Abdul Warith Norudin
·
Thursday, 06 December 2018 12:11
·
0 Likes
·
0 Votes
·
0 Comments
·
Thank you so much. That is so great. It was just what I needed. I have now launched the Charm template on our live site at https://www.DrCarney.com

I still have some tweaking I need to do but I really wanted to get the community bar on every page with this new template.

Thank you.

I do wonder if maybe the fix you gave me (which I love) might explain why the OffCanvas bars on the far right of the menu row does not respond when in a large and wide browser window?

I also wonder if it is possible to somehow lock the logo on the left of the menu bar in place so that when the browser window is being made smaller none of the menu items would load behind the logo. This is a place where having the menu titles wrap would probably be advantageous.

Sean
Sean Carney
·
Friday, 07 December 2018 05:08
·
0 Likes
·
0 Votes
·
0 Comments
·
Hi there,

Applied css codes on your development site. Can you give it a check and see how it goes.

[gist type="css"]
/* Inline menu and all related styling*/
.sp-megamenu-parent {
position: fixed !important;
padding-right: 25px !important;
}
#offcanvas-toggler.offcanvas-toggler-right {
position: absolute;
margin-left: 5px;
}
.container {
max-width: 100% !important;
}
body.layout-boxed #es.mod-es.mod-es-toolbar .es-toolbar:before {
left: -16px;
}

body.layout-boxed #es.mod-es.mod-es-toolbar .es-toolbar:before, body.layout-boxed #es.mod-es.mod-es-toolbar .es-toolbar:after {
width: 16px;
}
[/gist]
Abdul Warith Norudin
·
Friday, 07 December 2018 11:41
·
0 Likes
·
0 Votes
·
0 Comments
·
This did not quite work because what it is doing is causing the Menu items to the right to basically disappear. It does fix the problem with the first menu items becoming hidden behind the logo. But, instead of having items drop it probably should make the menu items wrap to a line below. This is only for a small subset of visitors whose web browser is not wide enough.

I am thinking that we should try to fix this on the live site because the live sites Main Menu is behaving differently now with the previous css tweak that you put into my custom.css file there which shrunk the area of the logo to not be as wide.

Sean
Sean Carney
·
Tuesday, 11 December 2018 01:58
·
0 Likes
·
0 Votes
·
0 Comments
·
Hi Sean,

I have consulted this with our designer and it is not possible to achieve this(for smaller width browser) as your menu items are too many. The only way to adjust this is to remove some of your menu items in order to cope with all browser's width.

I am thinking that we should try to fix this on the live site because the live sites Main Menu is behaving differently now with the previous css tweak that you put into my custom.css file there which shrunk the area of the logo to not be as wide.

Not really sure what you meant here. Can you point us with some references so that we can have better understanding.

Please advice.
Abdul Warith Norudin
·
Tuesday, 11 December 2018 11:40
·
0 Likes
·
0 Votes
·
0 Comments
·
OK. That is an unfortunate answer after all the work I just put into this redesign. I can't really use less menu items so I guess I need to go find a different template to use. I need to find a template that can give me one full row just for the menu items and then have the logo on a separate line but still have the logo and the menu items be sticky to the top of every page. I will start looking now. I think I will try to see if I can find something from JoomShaper using Helix Ultimate to make this transition easier.

I will try to discuss with them what it would also take to make the community bar visible on every page. That is the feature that I really love about this Charm template. So, I need something like Charm but with the logo and the main menu on separate lines.

Sean
Sean Carney
·
Wednesday, 12 December 2018 06:07
·
0 Likes
·
0 Votes
·
0 Comments
·
OK. What I decided to do was to change the titles on my main menu to be four letter only titles. Now they are not as descriptive but they fit without my having to abandon the template. :-)
Sean Carney
·
Wednesday, 12 December 2018 06:34
·
0 Likes
·
0 Votes
·
0 Comments
·
Hi Sean,

Thanks for updating this and glad to hear that your issue has been resolved now.

Just for your information, I have locked and marked this thread as resolved to avoid confusions in the future. Please start a new thread if you have any other issue in the future so it will be easier for us to manage your inquiries.

Thanks for understanding.
Abdul Warith Norudin
·
Wednesday, 12 December 2018 10:00
·
0 Likes
·
0 Votes
·
0 Comments
·
View Full Post