I removed the background image from the Color section and added the above css to Quick CSS as you suggested. The background image is not centered and is not resizing responsively when the larger random quotes appear.

Any ideas?

* FYI: I previously placed the following styles in the enfold-child/style.css file to style the quotes and author:

/* START Easy Random Quotes plugin section */

/* jv: investigate > For Developers: Section ID > id="section-quotes" later.
#section-quotes {
	background-color: #bbff00;
}
*/

#quotes {
	text-align: center;
	margin: 0 5%;
}

/* jv: Formats quote */
p.quotes-caption {
	margin: 0 0;
	font-size: 1.25em;
	line-height: 1.3em;
	color: #0f75bc;
}

/* jv: Formats quote signature under quote */
p.quotes-signature {
	margin: 5px 0 0 0;
	font-size: 1.15em;
	line-height: 1.3em;
	font-style: italic;
	color: #898989;
}

/* END Easy Random Quotes plugin */

Thanks! I added that but when I scroll down (using a sized down browser window) I can still faintly see the text behind the header when it scrolls up.

Here are the full contents of Quick CSS

.logo, .logo img {
max-width: 340px !important;
width: 340px !important;
height: auto !important;
max-height: none !important;
}
.logo img{
position: relative;
top: -40px;

}
body {
font-size: 15px;
}
.avia_message_box_content { text-transform: capitalize; }

#header_main .container, .main_menu ul:first-child > li > a {
height: 88px !important;
line-height: 88px !important;
}

html.fixed_header #main {
padding-top: 88px;
}

.logo a {
max-height: none !important;
}

That is very helpful!
One last question.

How do I make the TEXT in the button a bigger size? I didn’t see it in the button options and I’m not sure what the CSS would be.

Thank you so much for your help!!!

What about changing the button from the rounded corners to a more rectangular look?

the code generated is :

<div class="avia-button-wrap avia-button-left  avia-builder-el-8  el_after_av_icon_box "><a href="" class="avia-button avia-icon_select-yes avia-color-theme-color avia-size-medium avia-position-left "><span class="avia_button_icon" aria-hidden="true" data-av_icon="" data-av_iconfont="entypo-fontello"></span><span class="avia_iconbox_title">2012</span></a></div>
<br>
<div class="avia-button-wrap avia-button-left  avia-builder-el-9  el_after_av_button "><a href="" class="avia-button avia-icon_select-yes avia-color-theme-color avia-size-medium avia-position-left "><span class="avia_button_icon" aria-hidden="true" data-av_icon="" data-av_iconfont="entypo-fontello"></span><span class="avia_iconbox_title">2011</span></a></div>
<br>
<div class="avia-button-wrap avia-button-left  avia-builder-el-10  el_after_av_button  avia-builder-el-last "><a href="" class="avia-button avia-icon_select-yes avia-color-theme-color avia-size-medium avia-position-left "><span class="avia_button_icon" aria-hidden="true" data-av_icon="" data-av_iconfont="entypo-fontello"></span><span class="avia_iconbox_title">2010</span></a></div>
<p></p>

@Devin Hi, thanks for the help. However, that code didn’t work either, and the font size or color doesn’t work either, I tried another color and a bigger font, and nothing changes. Nothing I type in the Quick CSS seems to work. Do you have any idea why that can be? I really need it to work very soon. Would really appreciate more help. Thank you /Rubie

@Devin Hi!

This is the code I wrote. I don’t see these modifications on the page. Not the logo, or the font or size of the menu.

Thank you!
Rubie

#top .logo img {
width: 156px;
height: 156px;
}

/*header with social icons: */
.social_header #header_main .container, .social_header .main_menu ul:first-child > li a { height: 200px; line-height: 116px; }

#top .main_menu .menu li > a {

font-family: “Terminal Dosis”, sans-serif;

font-size: 24px; color: #999; text-transform: uppercase;

}

Hey :)

so … i think, i figured out, that the basic.css from the ubermenue is overwriting your css File:
The releated part seams this one:
media=”all”
#megaMenu.megaResetStyles div, #megaMenu.megaResetStyles span, #megaMenu ul.megaMenu, #megaMenu ul.sub-menu, #megaMenu ul.um-sidebar, #megaMenu li.menu-item, #megaMenu li.widget, #megaMenu li.menu-item > a, #megaMenu img.um-img {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
text-shadow: none;
visibility: visible;
opacity: 1;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
-o-box-sizing: content-box;
box-sizing: content-box;
-webkit-backface-visibility: visible;
-moz-backface-visibility: visible;
-ms-backface-visibility: visible;
-o-backface-visibility: visible;
backface-visibility: visible;
}

I played around with the developer tools from the chrome browser. When i disable the “font-size: 100%”, then your search Icon will appear bigger.
I’m not really firm with CSS. is there a possibility to solve the stuff in the Enfold Theme, or should i contact the ubermenue support ?

Another idea … i can setup a testing wordpress installation for you, with Enfold and the Ubermenu Plugin. Also with FTP access and so on.
I think, when this would be necessary, i can do this on weekend ..

Br,
Martin

P.S. perhaps it could be a great idea, to implement the possibility to use a graphical menue with Enfold :)

• This reply was modified 12 years, 3 months ago by mwolfert.

OK I eliminated the Font tag and written in the Styling tab:
.sub_menu>ul>li>a { font-size: 14px; color: white !important; }
I had to add “important” because otherwise it was diplaying grey instead of white.
Mobile is still displaying in 2 lines.
Additionally the three words now are white and I don’t know where and how to specify that I want the word “Blog” in red.

Hi Devon,
thank you so much for sharing your work. Unfortunatley it does not work for the musikzentrale website so far. Here is what i have done:

– disabled custom.css so it does not interfere with the modifications
– entered this to the Quick CSS field in Enfold -> Styling

/*Removes
================================================== */

#top.home #header_main {
  border: 0;
}
.header_color .header_bg {
  background: transparent;
  border: 0;
}

/* # Header
================================================== */

#top.home #top .logo {
  left: -4px;
}

/*Navigation*/
.header_color .main_menu ul:first-child > li > a {
  color: #fff; 
  font-size: 15px;
}
.header_color .avia-menu-fx {
    background: #aabdd3;
    border-color: #aabdd3;
    display: none;
}
/* # Home Page Specifics
================================================== */

/*Header*/
#top.home #header {
  position: absolute;
  padding-top: 40px;
}

/* #slider */
#top.home #fullscreen_slider_0 {
  padding-top: 128px;
  height: 710px;
  background: #e6e6e6;
  border: 0;
}

It moves the header and the intro section down as supposed to and removes the borders, but header is still white and the full screen slider is to far underneath the header. I assume, i missed something in the styling, so any idea is welcome. Otherwise i am excited to read your tutorial on the Full Screen Homepage soon.

Thanks again,
Sebastian.