MOBIL ONLY -> Copyright and Footer Menu CENTERED in 2 lines - Support

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

Author

Posts
August 16, 2018 at 11:28 am #997901

holgerlietz
Participant

Hey there,

I just switched to your theme. Great stuff!!! I have solved some issues within the forum, but have failed on the above.

How can I MOBIL ONLY center the Copyright and Footer Menu in the Socket? Here is what I have used, but it ain’t working.

THIS UNFORTUNATELY CENTERS THE COPYRIGHT ALSO ON THE DESKTOP

/*Footer Copyright centered MOBIL*/
#socket .copyright {
width: 100%;
text-align: center;
}

THIS WORKS FOR THE FOOTER MENU MOBIL, BUT OFFSETS THE COPYRIGHT ON DESKTOP

/*Footer Content centered MOBIL*/
#socket .sub_menu_socket {
text-align: center;
}
#socket .sub_menu_socket li {
float: none;
display: inline;
}

This is the website I am working on: https://interim-manager.biz/
I would need a code which centers both (copyright + footer menu) MOBIL ONLY and does not influence the desktop.

Thx for your response.

Holger

August 17, 2018 at 5:20 am #998251

Ismael
Moderator

Hey holgerlietz,

Thank you for using Enfold.

You have to wrap those css codes inside a css media query, so that they will only be applied to a specific device or screen size.

// https://css-tricks.com/snippets/css/media-queries-for-standard-devices/

Best regards,
Ismael

August 20, 2018 at 4:33 pm #999473

holgerlietz
Participant

Hi Ismael,

Thx. Gotya! Could you provide me with an example how I can wrap the above codes into a css media query? Let’s say on an iPhone 6 portrait and landscape, so I can see the coding. I am doing it somehow wrong :-(((((

Thanks,

Holger

August 20, 2018 at 4:54 pm #999493
Victoria
Inactive Moderator
Hi Holger,

The media query below will make the code apply only for screen sizes up to 767px
```
@media only screen and (max-width: 767px) {
   /*Footer Content centered MOBIL*/
  #socket .sub_menu_socket {
    text-align: center;
  }
  #socket .sub_menu_socket li {
    float: none;
    display: inline;
  }
  /*Footer Copyright centered MOBIL*/
  #socket .copyright {
    width: 100%;
    text-align: center;
  }
}
```
If you need further assistance please let us know.

Best regards,
Victoria
August 20, 2018 at 8:59 pm #999603

holgerlietz
Participant

Hi Victoria,

Thx so much for the clarification and the code. Just works fine!

I have two other questions. If I should open separate posts for the benefit of the community, pls. let me know and advise.

1. Is there a code to decrease the padding of the “Top Arrow” MOBIL from bottom and from the right of the screen, as it stands to much into the content on small screens? I have activated the “Top Arrow” with the following code I found in the forum:

/*Top Arrow MOBIL*/
@media only screen and (max-width: 767px) {
.responsive #scroll-top-link {
display: block !important;
}
}

2. Is there a way to fold the “fullwidth submenu” into the general menu -> MOBIL ONLY? If not, is there a code to suppress the “fullwidth menu” MOBIL ONLY?

Thanks for your great support!

Best regards,

Holger

August 22, 2018 at 1:46 pm #1000316
Vinay
Inactive Moderator
Hi,

Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child theme’s style.css file:

CSS Snippet:
```
/* CSS - Scroll to top on mobile */

@media only screen and (max-width: 767px) {
   .scroll-top-link {
    height: 22px;
    width: 22px;
    line-height: 20px;
    right: 22px;
    bottom: 22px;
  }
}
```
To switch the fullwidth menu element to a mobile menu in small screen please open the element options and at the bottom under the “Mobile Menu Display” select Display as a button.

Best regards,
Vinay
August 23, 2018 at 3:49 pm #1000797

holgerlietz
Participant

Hi Vinay,

1. To position the Top Arrow: The codes does unfortunately nothing.

2. To the fullwidth menu. I probably was not clear. The function you mentioned I know. What I meant was something different. To me it does not make sense to have two „burger menus“ mobil“ – i.e. the overall menu (as burger symbol) and the fullwidth menu (as burger menu). Th is to me confusing. Therefore, (although I doubt it) is there a code that shows the elements of the fullwidth menu in the overall menu? Here is an example:

The overall menu has 3 pages: 1, 2, 3 (as a burger menu) mobil.

• The fullwidth submenu is on page „1″: 4, 5, 6
• The fullwidth submenu is on page „2″: 7, 8, 9

Here is what I am looking for:

The fullwidth menu MOBIL ONLY is suppressed. However, if the overall menu burger is open/visible, it shows

• Page 1

• submenu 4
• submenu 5
• submenu 6

• Page 2

• submenu 7
• submenu 8
• submenu 9

• Page 3

As said, I doubt that this is feasible. If your answer is „Nope“, could you kindly provide me with a code to completely suppress the „fullwidth menu“ MOBIL ONLY!

Thx for your great support!

Holger

August 24, 2018 at 5:10 pm #1001316
Vinay
Inactive Moderator
Hi,

1. Sorry, my bad, please use the below CSS to make the scroll to top smaller in mobile.
```
@media only screen and (max-width: 767px) {
   #top #scroll-top-link {
    height: 22px;
    width: 22px;
    line-height: 20px;
    right: 22px;
    bottom: 22px;
  }
}
```
2. Thank you for elaborating the menu issue. There is a way to make it look like the full-width submenu items appear in the main burger menu in mobile view.

a. First, create a copy of the full-width submenu items in the main menu.

b. Hide the copy of submenu items from the main menu in desktop view.
Similar steps as mentioned here https://kriesi.at/documentation/enfold/menu/#hide-menu-items-on-mobile

c. Enable custom CSS class name support from Enfold theme options > Layout Builder > Show element options for developers

d. Hide the full-width submenu on the mobile device using a custom class “only-desktop”.

Hope this helps :)

Best regards,
Vinay
August 25, 2018 at 1:41 pm #1001637

holgerlietz
Participant

Hi Vinay,

Thx for your response. The new code and advise works perfectly! However, having said this, 2 new issue have been popped-up:

1. As the submenu items are suppressed in desktop (only visible mobile) the red line for the submenus is still visible on the desktop. That looks kind of odd. Can I somehow suppress it? Have a look what it looks on the link below.

2. ON MOBILE I have folded the submenu (fullwidth menu items) into the main menu. However, the fullwidth menu (as burger symbol) is still visible. Makes no sense. Can I suppress the fullwidth menu MOBILE ONLY?

In a nutshell, here are the 2 questions again:
1. How to suppress the submenu redline in the main menu?
2. How to suppress the fullwidth menu ON MOBILE ONLY?

Thx for your great response! Looking forward to your response.

Kind regard,

Holger

August 27, 2018 at 2:32 am #1002085
Ismael
Moderator
Hi,

Thanks for the update.

1.) Use this css code to hide the sub menu container completely.
```
@media only screen and (min-width: 989px) {
    #top .av-main-nav li > ul {
        display: none !important;
    }
}
```
2.) And use this one to hide the full width sub menu element on mobile view.
```
@media only screen and (max-width: 767px) {
    .responsive #top .av-submenu-container {
        display: none;
    }
}
```
Best regards,
Ismael
August 27, 2018 at 9:29 am #1002180

holgerlietz
Participant

Hi Ismael,

Thx, works fine! 2 last minor things and I am done.

1. I would like to have the main menu points on the transparent background WHITE and then change it to black when the menu gets smaller on a white background when you scroll down (pls. see my website: https://interim-manager.biz/). Currently the settings are the same on transparent and white background. Is this possible? I fiddle around in the menu appearance settings, but it seems that I am to stupid to get it.

2. The Headline “DATENSCHUTZERKLÄRUNG” is to long for mobile. I changed the font size in the paragraph settings to a smaller font size for mobile, but the effect is none. What do I do wrong?

Thx for your resonse,

Holger

August 28, 2018 at 1:10 am #1002475
Ismael
Moderator
Hi,

Thanks for the update.

1.) You can try these css codes to change the header background on scroll.
```
.header-scrolled .header_bg {
    background-color: #666666;
    color: #ffffff;
}

.header-scrolled.header_color .av-subnav-menu a:hover, .header-scrolled.header_color .main_menu ul:first-child > li a:hover, .header-scrolled.header_color .main_menu ul:first-child > li.current-menu-item > a, .header-scrolled.header_color .main_menu ul:first-child > li.current_page_item > a, .header-scrolled.header_color .main_menu ul:first-child > li.active-parent-item > a {
    color: #ffffff;
}

.header-scrolled.header_color .sub_menu>ul>li>a, .header-scrolled.header_color .sub_menu>div>ul>li>a, .header-scrolled.header_color .main_menu ul:first-child > li > a, #top .header-scrolled.header_color .main_menu .menu ul .current_page_item > a, #top .header-scrolled.header_color .main_menu .menu ul .current-menu-item > a, #top .header-scrolled.header_color .sub_menu li ul a {
    color: #a40633;
}
```
2.) And then use this css code to adjust the h1 font size on mobile view.
```
@media only screen and (max-width: 767px) {
    .template-page .entry-content-wrapper h1, .template-page .entry-content-wrapper h2 {
        text-transform: uppercase;
        letter-spacing: 1px;
        font-size: 1.3em;
    }
}
```
Best regards,
Ismael
August 30, 2018 at 9:51 am #1003463

holgerlietz
Participant

Hi Ismael,

Thx for the codes! However, changing the header font color on scroll does not work. Nevertheless, I checked you demos. It must be a setting within the theme w/o any CSS coding. I checked your demos. On the “2017” demo https://kriesi.at/themes/enfold-2017/, that’s exactly how I want it: white fonts on transparent background, switching to a white background and 2 different dark colors for the menu fonts (depending on which page your are on).

Could you provide me with the settings on the demo, as I seem to be too stupid to figure it out within the settings.

That should do for the mo.

Thanks for your contious great support!

Kind regards,

Holger

August 31, 2018 at 3:49 am #1003866

Ismael
Moderator

Hi,

Thanks for the update.

1.) Set the “Header” > “Transparency Options” > “Transparency menu color” option to “#ffffff” or white. That is going to be the color of the menu items when the header is transparent. For non-transparent headers, you have to configure the “General Styling” > “Logo Area” > font color options.

Best regards,
Ismael

August 31, 2018 at 8:15 am #1003953

holgerlietz
Participant

Hi Ismael,

Thx, that was exactly it. So easy, if you know where to look!

That’s it for the mo. If I have something else, I will better open a new thread in the future:-)))), if I can’t find it in the forum.

Thx for your and the support of your other team members. It was the right decision to switch to you guys.

Have great weekend and

best regards,

Holger

August 31, 2018 at 12:04 pm #1004045

Ismael
Moderator

Hi,

You’re welcome! Glad we could help. Have a nice weekend and thank you for switching to Enfold! :)

Best regards,
Ismael
Author

Posts

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

The topic ‘MOBIL ONLY -> Copyright and Footer Menu CENTERED in 2 lines’ is closed to new replies.