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.

I just realized. This would change the style for every accordion, not just on the one I want to include on the homepage?

Thank you!

Great, thank you!

Hi again,
1- this did not work, I even added an !important; to the last line.
@media only screen and (max-width: 989px) and (min-width: 768px) {
.header-buttons {
left: 0;
}

Here is my current code, that I’ve added in the Quick CSS:
/*Add reserve now button to Header-added code to header.php*/
.header-buttons {
position: absolute;
right: 0;
border: none;
top: 0;
left: 495px;
}
.header_color .header-buttons a {
display: block;
padding: 2px 7px 5px 7px;
font-size: 21px;
font-weight: bold;
float: left;
color: #f8d699;
border-radius:0px 0px 15px 15px;
}
.header-buttons a.header-chat { background-color: #985e06; left center no-repeat; }
/*Color hover of TripAdvisor*/
#top .social_bookmarks_tripadvisor:hover a {
color:#ff;
background-color: #29A959;
}
/*testing- Move Reserve button on iphones*/
@media only screen and (max-width: 989px) and (min-width: 768px) {
.header-buttons {
left: 0px !important;
}

2. As you suggested, I’d like to hide the layerslider on mobile. Can you tell me how to do that? Do I still need to assign a css selector? If so, can you point to or share more info on how to do that? I’m only familiar enough with it to be dangerous at this point.

Thanks -Lynn

You can find the website at this link: http://bit.ly/1fqPkFc

didn’t work. I did some research and it seems like jetpack doesn’t respond to css because it is contained inside an iframe ( i say that like I understand what it means lol).

I think it will be okay with that font small anyways.

Thanks for the help Yigit

Jonny