Bug on menu independent publisher 2

ahidalgo67 · Member · Jul 4, 2019 at 5:47 pm
Copy link

Add topic to favorites
Hi all,

I am using this theme on my site at bluehost. However I notice a bug on the display of the menus (only when viewing the site on a smartphone):
as I enter a page with the menu, its submenus wont display-

This is how it looks before accessing page: Equipo (team)
menu status before

This is how it looks after entering page: Equipo
menu status after

Any ideas how to fix it?

It worked just fine on my old site at wp.com
studioguitarte at wordpress

The blog I need help with is: (visible only to logged in users)
garysixtyeight · Member · Jul 4, 2019 at 6:16 pm
Copy link
Hi there,

You’re right, this is a bug with the version of the theme being used on your site, version 2.1.5.

As a workaround, please try adding the CSS below to the site in Appearance > Customize > Additional CSS:
```
@media screen and (max-width: 32.375em) {
	.main-navigation > div > ul > li.current-menu-item > ul > li a,
	.main-navigation > div > ul > li.current_page_item > ul > li a {
		color: #00aadc;
	}
}
```
The bug should be fixed in version 2.1.7.

@Staff – the download link on the theme showcase page for Independent Publisher 2 links to version 2.1.5:

https://wordpress.com/theme/independent-publisher-2

Could that be updated to 2.1.7 which fixes this bug?
staff-blorbo · Staff · Jul 4, 2019 at 7:30 pm
Copy link
Thanks, we’ll get this fixed right away!
garysixtyeight · Member · Jul 4, 2019 at 7:32 pm
Copy link
Great, thank you :)
ahidalgo67 · Member · Jul 4, 2019 at 10:21 pm
Copy link
Thanks for the help.

So, which way should I proceed?
Adding the code or uploading new version??

A.
staff-blorbo · Staff · Jul 4, 2019 at 10:24 pm
Copy link
For now, I recommend making the CSS change that Gary proposed.

We’ll get the download link fixed as soon as we can, but it is a holiday over here, so it may not happen today.
ahidalgo67 · Member · Jul 4, 2019 at 10:31 pm
Copy link
Thats right! Happy 4th!

I added the code and it works.

Do notice that it changes the color of the the submenu when entering the page in particular (top level page)

A.
ahidalgo67 · Member · Jul 4, 2019 at 10:35 pm
Copy link
Also there is another issue I noticed. Also on smartphone display: there is a big space between the header picture and the title of the page. Any way to adjust that?

(it looks ok on desktop layout)

A.
ahidalgo67 · Member · Jul 4, 2019 at 10:37 pm
Copy link
Fonts are also a problem. I dont know what font plugin is installed in wp.com but on bluehost I needed to install google easy fonts and they don’t really work…
staff-blorbo · Staff · Jul 4, 2019 at 10:48 pm
Copy link
On the color change, just adjust this part of Gary’s code as desired:

color: #00aadc;

For the whitespace, use this in Additional CSS and adjust as desired:
```
@media screen and (min-width: 86.25em) {
	.content-wrapper {
		padding-top: 1em;
}
}
@media screen and (min-width: 62em) {
	.content-wrapper {
		padding-top: 1em;
}
}
```
As for the fonts plugin you chose, I recommend asking at https://wordpress.org/support/plugin/easy-google-fonts/ so the plugin’s developers and support community can help you with this.
ahidalgo67 · Member · Jul 4, 2019 at 11:08 pm
Copy link
I added this

@media screen and (min-width: 86.25em) {
.content-wrapper {
padding-top: 0;
}
}

@media screen and (min-width: 62em) {
.content-wrapper {
padding-top: 0;
}
}

Still won’t remove white space… I think the menu element has a padding bottom that won’t allow the reduction of that white space.
ahidalgo67 · Member · Jul 4, 2019 at 11:13 pm
Copy link
thanks you for your help!!
staff-blorbo · Staff · Jul 4, 2019 at 11:16 pm
Copy link
Hm ok, sometimes Additional CSS doesn’t work well with media queries, it’s definitely top padding though, there’s no padding below the menu.

Try this and adjust as desired:
```
.content-wrapper {
		padding-top: 1em;
}
```
ahidalgo67 · Member · Jul 5, 2019 at 1:23 am
Copy link
ah ok I’ll see if that works. Will let you know either way.

A.
ahidalgo67 · Member · Jul 5, 2019 at 1:33 am
Copy link
this worked just fine;

.content-wrapper {
padding-top: 1ch;
}

thanks a lot.

A.
ahidalgo67 · Member · Jul 5, 2019 at 4:45 pm
Copy link
Hi all, thanks again for your help.

One more questions

Is there a way to reduce the size of the header picture? justo for the desktop layout?

It looks fine on smartphones but its a bit tall on desktops.

A.
staff-doublebassd · Staff · Jul 5, 2019 at 5:47 pm
Copy link
Hi there,

You should be able to adjust the header size by playing with the padding numbers with this snippet:
```
@media screen and (min-width: 62em)
.has-header-image #hero-header {
    padding: 12.6vh 3.5em;
}
```
Let me know if that works.

Thanks!
ahidalgo67 · Member · Jul 5, 2019 at 8:53 pm
Copy link
Thanks,
I will

A.
ahidalgo67 · Member · Jul 5, 2019 at 9:00 pm
Copy link
I added this :

@media screen and (min-width: 62em){
.has-header-image #hero-header {
padding: 6.6vh 1.5em;
}
}

with no aparent effect.

A
ahidalgo67 · Member · Jul 6, 2019 at 1:06 am
Copy link
It would be nice to add a link to WhatsApp messages on the Social Media Menu
Is that at all possible???

Thanks in advance.

A-

No items found.