VISIT AND LIKE OUR PAGE ON FACEBOOK
TAKE A LOOK AT OUR TWEETS ON TWITTER
SUBSCRIBE TO THE JOOMFREAK RSS FEED
CHECK OUT OUR PAGE ON GOOGLE +
VISIT OUR CHANNEL ON YOUTUBE

Account Details

Change your name, email, password or permanently delete your account. Change settings

We offer several ways you can get support from our experts: Support ForumKnowledgebaseNewsletter

Your Forum Posts

No posts to display.

Welcome, Guest
Username Password: Remember me

Menu color in pages without slideshow
(1 viewing) (1) Guest
  • Page:
  • 1

TOPIC: Menu color in pages without slideshow

Menu color in pages without slideshow 27 May 2016 21:41 #8898

Hi,

I'm trying to obtain a visible menu in those pages different from the home that don't have a slideshow. In these pages the menu is transparent, with white text color and if you have a background-color of the whole page set to light-grey, these menu voices are invisibles.

I'm looking on your jfsalina demo, and I saw that you used a class called "section-inner" to obtain a dark background with the page title (for example in a page called "Masonry Portfolio").
How I can obtain a similar effect? I have tryed to put a module in "welcome" position and add "section-inner" class, but this method don't work. I have tryed also to with a custom module, setting the width to 100%, heigth 200px and a background color, but I don't like the results.

What can I do?

Thank you

  • Posts:45
  • me
  • Senior Boarder
  • OFFLINE
  • Karma: 0

Re: Menu color in pages without slideshow 29 May 2016 14:15 #8901

I solved using a module in "slideshow" position, I have created a Joomla "customized" module, and I have added with "Sourcerer" (Sourcerer is a plugin for adding html, css, php and js code snippets) this code writed by me:

 
 
{source} <!-- the sourcerer snippet starting tag -->
 
style <!-- You need to put here the START style tag, this forum can t permit me to add this kind of tag with major and minor signs for style element -->
 
.background_for_menu{
width: 100%;
height: 400px;
float: left;
position: relative;
top: 0;
background-color: black;
}
 
.bg_image_for_menu {
position: absolute;
background-image: url("/images/back_menu.jpg"); <!-- your image source -->
background-repeat: no-repeat;
background-size: cover;
background-position: center;
height: 400px;
opacity: 0.4;
width: 100%;
}
 
.text_for_menu_area {
width: 100%;
position: absolute;
margin-top: 160px;
font-size: 46px;
font-weight: 300;
letter-spacing: 3px;
color:white;
}
 
style <!-- put here the END style tag here, this forum can t permit me to add this kind of tag with major and minor signs for style element -->
 
 
<div class="background_for_menu">
 
<div class="bg_image_for_menu"> </div>
<div class="text_for_menu_area"> Contact Us </div>
 
</div>
 
{/source}
 
 


The result it's similar at what you can see here: www.joomfreak.com/demo/jf_salina/portfol...rtfolio-masonry.html with a dark top bar, title, and background image with opacity.

I hope that this solution can be useful for other people.

Last Edit: 04 Jun 2016 14:33 by me.

  • Posts:45
  • me
  • Senior Boarder
  • OFFLINE
  • Karma: 0

Re: Menu color in pages without slideshow 30 May 2016 02:58 #8903

Thank you for your sharing!

joomfreak
The following user(s) said Thank You: me

  • Posts:2144
  • isupport
  • Moderator
  • OFFLINE
  • Karma: 0

Re: Menu color in pages without slideshow 04 Jun 2016 14:27 #8936

isupport wrote:
Thank you for your sharing!

joomfreak


Thank you for your work guys

  • Posts:45
  • me
  • Senior Boarder
  • OFFLINE
  • Karma: 0
  • Page:
  • 1
Time to create page: 0.52 seconds

joomfreak is not affiliated with or endorsed by the Joomla Project or Open Source Matters.
The Joomla logo is used under a limited license granted by Open Source Matters the trademark holder in the United States and other countries.