Main Nav moves in tablet view - Support | Kriesi.at

Viewing 8 posts - 1 through 8 (of 8 total)

Author

Posts
October 22, 2017 at 8:40 pm #867302

ScottYetter
Participant

In desktop view my main nav is aligned perfectly (vertically). On smaller screen (tablet view), it moves up to be centered vertically in the green header area. Is there a way to make it stay at the bottom of the green area like it is in desktop view? You can see what I’m talking about at the link below. Mobile view is perfect.

October 23, 2017 at 5:32 am #867446
Nikko
Inactive Moderator
Hey ScottYetter,

Try adding this css code in Quick CSS (located in Enfold > General Styling):
```
@media only screen and (max-width:959px) and (min-width:768px) {
  .home #header #avia-menu {
    position: relative;
    top: 60px;
  }
}
```
Hope this helps :)

Best regards,
Nikko
October 23, 2017 at 7:12 am #867470

ScottYetter
Participant

Hi Nikko,

I tried that and it did not move the main nav text. Is it possible there is some other code conflicting with this new code?
Here is everything else I have added:

.html_header_top.html_logo_center .logo {
left: 0;
-webkit-transform: none;
-ms-transform: none;
transform: none;
}
.av-main-nav > li > a {
padding: 65px 30px;
}
#top .av_header_transparency .avia-menu-fx {
width: 55%;
left: 23%;
}
.sub_menu li {
border: none;
}
#scroll-top-link {display: none;
}
#top #header.header_color.av_header_transparency .av-main-nav > li > a .avia-menu-text {
height: 37px;
display: inline-block;
}
#top #header.header_color.av_header_transparency .av-main-nav > li:hover > a span.avia-menu-text {
border-bottom: 2px solid;
}
#header_meta {
position: absolute;
right: 0;
border-bottom: 0;
padding-top: 20px;
}
@media only screen and (max-width: 767px) {
#header_meta {
width: 100%;
padding-top: 0;
}
#header_main {
padding-top: 20px;
}
}
#top .av_header_transparency #header_meta {
border: none;
}
#top #header.header_color.av_header_transparency .av-main-nav > li.current_page_item > a .avia-menu-text {
border-bottom: 2px solid #fff;
}
span.avia-menu-fx {
display: none;
}
.template-page .entry-content-wrapper h1, .template-page .entry-content-wrapper h2{
text-transform:none!important;
}
.template-page .entry-content-wrapper h1, .template-page .entry-content-wrapper h1{
text-transform:none!important;
}
.template-page .entry-content-wrapper h1, .template-page .entry-content-wrapper h3{
text-transform:none!important;
}
.template-page .entry-content-wrapper h1, .template-page .entry-content-wrapper h4{
text-transform:none!important;
}
.template-page .entry-content-wrapper h1, .template-page .entry-content-wrapper h5{
text-transform:none!important;
}
#top .dropdown_widget .buttons .button {
background: #666;
}
@media only screen and (max-width:959px) and (min-width:768px) {
.home #header #avia-menu {
position: relative;
top: 120px;
}
}

October 23, 2017 at 8:09 am #867478

Nikko
Inactive Moderator

Hi,

I have checked it and it does work, I think 120px is too far down (and not visible) and goes to the white background. The code will only affect screen sizes between 768px and 959px which is the screen size of ipad in portrait mode.

Best regards,
Nikko

October 24, 2017 at 6:41 am #867992

ScottYetter
Participant

Hi, this does not work for me, no matter what I change the number to, the text does not move, stays in the same place. At 120 it is still right in the middle of the green header area.

October 24, 2017 at 5:21 pm #868295
Nikko
Inactive Moderator
Hi,

Just to clarify, the link you gave returns:
```
Nothing Found
Sorry, the post you are looking for is not available. Maybe you want to perform a search?
```
So I based on the homepage (link in private content), can you verify if it works or not on the homepage?

Best regards,
Nikko
October 25, 2017 at 7:09 am #868564

ScottYetter
Participant

Sorry about that, I changed the page name. New link below.

Regarding the home page, it actually works much better on home, I tweaked the max-width: to 990px and works perfect on the home page. Unfortunately on other pages the main nav still appears in middle of green at tablet sizes.

October 25, 2017 at 1:37 pm #868709
Nikko
Inactive Moderator
Hi,

Can you try to replace the code I gave you:
```
@media only screen and (max-width:959px) and (min-width:768px) {
  .home #header #avia-menu {
    position: relative;
    top: 65px;
  }
}
```
to this code:
```
@media only screen and (max-width:959px) and (min-width:768px) {
  #top #header #avia-menu {
    position: relative;
    top: 65px;
  }

  #top.page-id-18 #header #avia-menu,
  #top.page-id-35 #header #avia-menu,
  #top.page-id-63 #header #avia-menu,
  #top.page-id-367 #header #avia-menu,
  #top.page-id-448 #header #avia-menu {
    top: 0;
  }
}
```
Let us know if this helps :)

Best regards,
Nikko
Author

Posts

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.