Support Forums

Support Offline : Mon - Fri / 10am - 6pm (GMT +6)

Your Time: Our Time:

Menu at the top

Featured Lock Resolved Task
Hi,

We are revamping our website. The current one uses an old template from Joomlashine. We are switching to Joomshaper Spectrum template.

Here is our current website
https://www.clickgrafix.com

As you can see I have a menu at the top of the main menu. I want the same thing in the new look using Spectrum.

Here is a link to the new one (still in early stages)
http://www.clickgrafix.com/_webdev/click2019/

I am trying to add 3 menus at the top (top2 position), above the main menu. I want them to start from the right and not from the center. In addition, I want to add some icons near each title, just like the current one.

How do I do this?

I also want to know if you are using Bootstrap, and if yes, which version?

Thank you.

5 Answers

Pavel

More than a month ago #Permalink
As you can see from the link, the menu is not really on the right

For the location of the entire menu on the right, this part of the code is necessary additionally.

#sp-top2 .sp-column {
float: right;
}

http://dl3.joxi.net/drive/2018/12/15/0008/0401/545169/69/a28806502e.png
I am seeing the > before each menu. I am not sure why. I could not figure out how to get rid of it.

Change the menu module style/
http://dl4.joxi.net/drive/2018/12/15/0008/0401/545169/69/e8cac3298c.png
Also, since we are just starting, would it be better to choose Helix Ultimate as the framework as it uses the latest version of Bootstrap 4?

Yes, it uses bootstrap 4

Pavel

More than a month ago #Permalink
I want them to start from the right and not from the center

You should create a custom.css file. You can read how to do this in the Helix 3 documentation. Then you need some css knowledge. For example, to start the menu on the right, paste the following code into the custom.css file.

#sp-top2 .sp-column {
float: right;
}

I want to add some icons near each title, just like the current one.

This can be done in the settings menu item.
http://dl4.joxi.net/drive/2018/12/14/0008/0401/545169/69/c287dbfb54.jpg
I also want to know if you are using Bootstrap, and if yes, which version?

In the Helix 3 framework, bootstrap 3 is used.

Ahmed Balfaqih

More than a month ago #Permalink
Thanks Pavil. It looks better now but yet. I have followed your instruction and I added more. See below


#sp-top2 .sp-column ul>li {
/* display: inline-block; */
float: right;
border-bottom: none;
padding: 0 15px;
text-transform: uppercase;
}

.topmenu {
color: white !important;
}


As you can see from the link, the menu is not really on the right. In addition, I am seeing the > before each menu. I am not sure why. I could not figure out how to get rid of it.

http://www.clickgrafix.com/_webdev/click2019/index.php/portfolio

Also, since we are just starting, would it be better to choose Helix Ultimate as the framework as it uses the latest version of Bootstrap 4?

Thanks.

Ahmed Balfaqih

More than a month ago #Permalink
Thanks Pavil. I shall check Helux Ultimate.


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

Leaderboard (30 days)

Paul Frankowski

Paul Frankowski

Total Accepted Answers: 133
Sifat

Sifat

Total Accepted Answers: 88
Toufiq

Toufiq

Total Accepted Answers: 41
Pavel

Pavel

Total Accepted Answers: 7
Al Mamun

Al Mamun

Total Accepted Answers: 3

114

Templates

292518

Community Users

Newsletter

Don’t miss any updates of our new templates and extensions and all the astonishing offers we bring for you.
We never spam

Joomla! ® name is used under a limited license from Open Source Matters in the United States and other countries. JoomShaper.com is not affiliated with or endorsed by Open Source Matters or the Joomla! Project.

Connect Us