Navigation styling assistance « Support Forum | Kriesi.at

Support Forum » Corona

Navigation styling assistance

6 posts from 3 voices

Started 10 months ago by cwilder
Latest reply from Devin
This topic is resolved

Tags:

cwilder
Member

Hi! I'd like to make the menu bar of my client's site look like a long horizontal button. Can you help me do this?

This is what I have now:

This is what I'd like to make:

I have these three elements, if it is helpful:

I can create any combination of elements related to the nav bar button image.

Thank you again!!

Posted 10 months ago #
Ismael
Moderator

Hi cwilder,

Can you post a link to your site? and if it is under maintenance mode, kindly deactivate it, so we can check it and give you specific css snippets for your site.

Regards,
Ismael

Posted 10 months ago #
cwilder
Member

Thanks! Site is http://iheartgaming.com. I'm turning off the maintenance mode now. I really appreciate it!

Corrie

Posted 10 months ago #

Ismael
Moderator

Hi Corrie,

Kindly open header.php and find the code responsible for generating:
<div class="menu-main-navigation-container">
inside that div, add this code:
<div class="menu_left_bg"></div><div class="menu_right_bg"></div>

After adding it, kindly add this in your Quick CSS or custom.css:

.menu-main-navigation-container {
   background: url('http://iheartgaming.com/wp-content/uploads/2012/08/navigationBarMid.png') left top repeat-x;
   height: 81px;
}

#top .main_menu .menu {
   top: 24px !important;
}

.menu_left_bg {
   background: url('http://iheartgaming.com/wp-content/uploads/2012/08/navigationBarLeft.png') left top no-repeat;
   height: 81px;
   width: 27px;
   position: absolute;
   left: -27px;
   top: auto;
}

.menu_right_bg {
   background: url('http://iheartgaming.com/wp-content/uploads/2012/08/navigationBarRight.png') left top no-repeat;
   height: 81px;
   width: 31px;
   position: absolute;
   right: -31px;
   top: auto;
}

Hope this helps. :)

Regards,
Ismael

Posted 10 months ago #

cwilder
Member

Thank you for your help! I learn more about CSS styling and modifications every day. I really enjoy working with your Corona theme, it is extremely versatile and I'm using it for a number of surprisingly different-looking websites. In addition, your support team is knowledgeable and extremely patient with us less savvy developers.

Regards,
Corrie

Posted 10 months ago #
Devin
Moderator

Glad Ismael could help Corrie :)

Marked as resolved.

Regards,

Devin

Posted 10 months ago #