Pimping up the nav bar... - RocketCake Forum

Ambiera Forum

Discussions, Help and Support.

	Ambiera Forum > RocketCake
	Pimping up the nav bar...

bert Registered User
Quote
2017-01-02 17:27:56

Hi all,

My first message here.
After playing with the free version, I quickly decided to buy the pro version.
As many have said here: RocketCake is a great piece of software!

So far, I've been just playing to start feel at home with how it all works.
Here's my (first) question:
I want the nav bar items to have a background with rounded corners, when hovered over. This is what I wrote in "additional css":

nav ul li a {-webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
   transition: 1.5s;
}

As you can see, I also want them to transition (loose their 'nervousness')
Did I make a mistake?
Thanks!

niko Moderator
Quote
2017-01-03 07:43:46

Hm, you mean the menu entries in the navigation item? I'm not sure how you got to

nav ul li a

because there is no ul and no li items, as far as I've seen.
But adding something like this should work: (replace the menu_49c9c51c part with the actual id of your menu)


.menu_49c9c51c_mainMenuEntry
{
	border-radius: 15px;
   transition: 1.5s;
}

bert Registered User
Quote
2017-01-03 22:27:58

wrote:
Hm, you mean the menu entries in the navigation item? I'm not sure how you got to

nav ul li a

because there is no ul and no li items, as far as I've seen.
But adding something like this should work: (replace the menu_49c9c51c part with the actual id of your menu)


.menu_49c9c51c_mainMenuEntry
{
	border-radius: 15px;
   transition: 1.5s;
}

Thanks a lot Niko,

I forgot to mention I'm a css newbie. I usually just copy/paste from css
examples written by real men...

I briefly tried your proposal and it did not work. Don't worry, I'll try again with more time tomorrow.

Before this, I tried to get stylized buttons into the menu. That sort of works, but the responsiveness is lost.

Thanks again. Some pupils in the back of the classroom just need some more time to get to grips with new stuff...

niko Moderator
Quote
2017-01-04 08:56:28

Yes, it works, do it like this:
Right-click on the menu and select "HTML Code...". There you will see in the first line something like


<div id="menu_49c9c51c">

Copy that id (namely that menu_49c9c51c, it will have a differnt number for your menu).
Select the menu command "View -> HTML Code of the page -> additional CSS styles" and paste the code

.menu_XXXXXXXX_mainMenuEntry
{
border-radius: 15px;
transition: 1.5s;
}

But instead of that XXXXXXXX, paste that id number of your menu in there. So that the first line looks like .menu_49c9c51c_mainMenuEntry in this case. Then it works.

bert Registered User
Quote
2017-01-04 11:59:57

Thank you for your detailed help!
No luck yet...
I started a new page, which only contains a container with the menu in it.
This is what the code looks like:

🔎︎

and this is the result:

🔎︎

No rounded corners and no transition effect.
I don't see what could be wrong.
Do I need to save the page before this works?
Bye for now.

niko Moderator
Quote
2017-01-04 12:16:13

You added that into the additional styles for that element. Don't do it. Delete that again. Do it like I wrote: Select the menu command "View -> HTML Code of the page -> additional CSS styles" and paste the code there.

bert Registered User
Quote
2017-01-04 12:40:04

Yes! It's working perfectly now!
I should learn to read carefully...

Thanks Niko for your patient explaining.
Much appreciated.

Create reply:

Possible Codes

Feature	Code
Link	[url] www.example.com [/url]
Bold	[b]bold text[/b]
Image	[img]http://www.example.com/image.jpg[/img]
Quote	[quote]quoted text[/quote]
Code	[code]source code[/code]

Emoticons