[Resolved] Nav Button and styling sticky menu

[David]

1. I am confused.
The CSS you used from here is what you’re currently using:

https://generatepress.com/forums/topic/custom-footer-without-premium/page/2/#post-1015744

Lets call this option A

But you want to use 4 widgets. 1 for home and 3 for other pages. Lets call that option B.

Which Option do you want ? You cant have A and B working together.

2. This CSS is not part of Option A’s CSS:

@media (max-width: 1024px) and (min-width: 768px) {
    .footer-widgets .footer-widget-1,
    .footer-widgets .footer-widget-2,
    .footer-widgets .footer-widget-3 {
        clear: none !important;
        float: left;
        width: 33.3333%;
    }
}

This you have added at some other time and is what is causing the problem you currently have – if you remove it the problem goes away.

[An Nguyen]

Hi David,

+I like option B for footer-widgets! After using your css, in ipad mode (portrait) it displays 33% of width only. However, I want footer-widget1 that is full width in ipad mode. Now, it’s already been full width in desktop mode! (The issue comes from the width of footer-widget1 with ipad mode in homepage.I want 100% width like desktop mode)

(I’ve already set 2 layouts in element that use layout of footer-1 widget for homepage and footer-3 widgets in other page. I already setup footer-widget 1,2,3,4)

+And then in other pages, footer-widget 1,2,3 display instead of footer-widget 2,3,4 as I expected, because the widget 1 already display in homepage.This means that the footer-widget 4 doesn’t display in other pages as I expected. I want to display footer-widget 2,3,4 in other page in 3 modes (mobile, ipad and desktop). (The issue is that I want to hide the footer-widget 1, and display footer-widget 2,3,4 in other pages.)

You can go via my updated link and go to homepage and other pages. You will see the issues clearly.
I hope you are clear.

Thanks David for your kind supports.

[An Nguyen]

Hi David,

Updated! I could handle the layout for optionB base on your css. Currently, I have exactly the layout that I want.

Now, I just have 2 issues that need you help because I’m not sure to call exactly the class of elements that I want to change the format in footer.widgets.

+In ipad mode: homepage – footer-widget1 display only 33,33% width (I wanna display 100% width like desktop mode)

+In other page, could you help me set font-size:14px for all elements and padding inside footer.widgets(2,3,4): 20px for desktop and 10px for mobile & ipad? Currently, they are a bit messy in font size.

Thanks David.

[David]

It looks like you resolved the issue with the ipad width.

You can target each widget like so:

.footer-widget-1 aside:nth-child(4) >* {
    font-size: 20px !important;
}

@media (max-width: 768px) {
    .footer-widget-1 aside:nth-child(4) >* {
        font-size: 10px !important;
    }
}

Each widget is an aside element – the nth-child pseudo selector allows you to choose which one in the list. So the above CSS will effect the 4th child.

You can string the selectors together eg.

.footer-widget-1 aside:nth-child(2) >*, .footer-widget-1 aside:nth-child(3) >*, .footer-widget-1 aside:nth-child(4) >* {

[An Nguyen]

It’s worked.
Thanks David.

[David]

Glad to be of help

[An Nguyen]

Hi David,

Could you give me a favour? I met an error when using logo svg in footer-widget how can I fix it ? Base on you css I already set height and width but it doesn’t work. I use svg because it’s lighter and sharpen without pixelated and blurb compare with using png and jpeg.

“Warning: Illegal string offset ‘width’ in …/media.php on line 989”

I used this css to set W & H

.home .site-footer .widget_media_image img {
    height: 50px !important;
    width: 100px;
    padding-bottom: 20px;
}

[Tom]

Same issue as here, maybe?: https://generatepress.com/forums/topic/svg-causes-error-in-image-widget-but-not-in-html-widget/#post-611636

Seems removing the width/height from the HTML and using CSS fixes it.

[An Nguyen]

I did view this post. However,
I used image widget so no html, but I set height & W in the css above!

[Tom]

What if you add the image in an HTML widget?:

<img src="URL TO YOUR IMAGE" alt="" />

[An Nguyen]

Hi all,

I found solution for display without error but now the logo display in wrong place how can put it on right site of footer in desktop and keep it center in mobile mode.

Thanks.

[Tom]

Hi there,

The logo displays on the right side of the footer on desktop for me.

For mobile, try this:

@media (max-width: 768px) {
    .logoahlbtech-widget {
        float: none;
    }
}

[An Nguyen]

Hi Tom,

The code doesn’t work!

If I used .png or .jpeg, It will displays correctly in all modes (mobile,ipad,desktop) without your code. I’ve been tried to use .svg to keep the logo in high resolution and lighter.

[David]

Remove the two prooperties commented here:

.logoahlbtech-widget {
    width: 150px;
    float: right; /* remove */
    margin-left: auto; /* remove */
    margin-top: 10px;
}

This will center the logo.
Now add this to the your desktop media query so it aligns right:

.footer-widget-1 .widget-2 {
    text-align: right;
}

[An Nguyen]

Hi David,

It’s done like your suggest, but it still does not work.

[Author]

Posts