Header Widget CSS Help for Mobile Version - Support | Kriesi.at

Tagged: CSS, header widget

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

Author

Posts
April 30, 2017 at 3:23 am #785162

havi
Participant

Hi guys!!

I’m getting fancy with the theme but I am quite off when I try to center the header widget on the mobile version.

It ends up overlapping the logo and the WooCommerce Cart. The hamburger Menu shows perfectly. Also, the widget shows perfect on Desktop. What am I doing wrong?

Here’s the Custom CSS I am adding to the Child Theme. The Widget has a Search Box in it. Here’s the site: http://argen-travel.com/argentina-pizza/

Thank you so much for your kind help!!

Havi

/*header widget styling*/
#header .widget {
left: 75%;
padding-top: 1.5em;
position: absolute;
top: 0;
transform: translate(-50%);
z-index: 999;
width:300px;
max-width: 65%;
}
@media only screen and (max-width: 767px) {
#header .widget {
left: 40%;
padding-top: 1.5em;
position: absolute;
top: 0;
transform: translate(-50%);
z-index: 999;
width:45%;
max-width: 55%;
}}

May 1, 2017 at 12:41 am #785436

havi
Participant

Update:

I added the following CSS to remove the logo from the mobile/responsive version (but I need to bring it back):

/*remove logo from mobile version to allow space for search box*/
@media only screen and (max-width: 767px) {
.responsive .logo img { display: none !important; }
}

Help!!!

Thank you!!!

Havi

May 1, 2017 at 8:36 am #785581
Rikard
Keymaster
Hi,

Please try this instead to center the widget:
```
#header .widget {
  left: 50%;
  padding-top: 0;
  position: absolute;
  top: 0;
  transform: translate(-50%);
  z-index: 999;
}
```
Not sure what you mean by your logo though, did you try removing the CSS that you don’t want to apply?

Best regards,
Rikard
May 1, 2017 at 7:32 pm #785931

havi
Participant

Hi Rikard,

I’m confused. Is this CSS for the Mobile/Responsive version of the page? Because the Desktop version looks perfect as is. I removed the CSS that was prohibiting the Logo from being displayed on mobile.

So, now it look like this:

I think there are 3 options here:
1- add the CSS code I had the removes the logo from displaying
2- Making the logo smaller and the search box smaller too?
3- Making sure the Search Box displays below the Logo and the Hamburger Menu (I think this would be the nicest one and many people would love to have this)

For #3. we would need to adjust this CSS, correct?

@media only screen and (max-width: 767px) {
#header .widget {
left: 40%;
padding-top: 1.5em;
position: absolute;
top: 0;
transform: translate(-50%);
z-index: 1;
width:45%;
max-width: 55%;
}}

Thank you so much for your kind help!!

Warmly,

Havi
PS: I just referred you two more Enfold licenses. ;) Love Enfold!!!

May 1, 2017 at 7:33 pm #785932

havi
Participant

I probably have to add this link for the image:

May 2, 2017 at 2:48 pm #786388
Victoria
Inactive Moderator
Hi Havi,

Here is the code you can put in Enfold > General Styling > Quick Css, if it does not work, put into themes/enfold/css/custom.css
```
@media only screen and (max-width: 767px) {
  /* Add your Mobile Styles here */
#header .widget {
    left: 50%;
    padding: 0;
    position: absolute;
    top: 130%;
    transform: translate(-50%);
    z-index: 1;
    width: 100%;
    max-width: 90%;
}
.responsive #top #main {
    padding-top: 50px !important;
}
}
```
If you need further assistance please let us know.
Best regards,
Victoria
May 2, 2017 at 4:52 pm #786534

havi
Participant

Thank you, Victoria!! :) Brilliant!!! Works like a charm!!!

Warmly,

Havi

May 2, 2017 at 5:21 pm #786559

havi
Participant

Hi Victoria!! :)

I just need a tiny additional tweak… as I make my mobile menus sticky, when I add this code:

/* Sticky header on Mobile */
@media only screen and (max-width: 767px) {
#header {
position:fixed !important;
top: 0;
}}
@media only screen and (max-width: 767px) {
.responsive #top #main {
padding-top:168px !important;
}}

The container for the search button does not stick and the Search Box looks strange hanging from the menu when you scroll down… I know it’s just one additional CSS (and tinkered with a few – made the whole mobile screen fixed lol so basically cannot figure out which element I need to fix)

Thank you in advance for your kind help!!

Warmly,

Havi

May 2, 2017 at 9:37 pm #786726

John Torvik
Inactive Moderator

Hi,

I am not sure if I am right, but I`ve checked your site and all is working normally (the menu and the search bar are stuck.

Best regards,
John Torvik
Author

Posts

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

You must be logged in to reply to this topic.