[Resolved] How can I control the logo size on primary navigation for Mobile and tablet?

[Kay]

Hi,

How can I control the logo size on primary navigation for Mobile and tablet?

The logo size too small but I could not find where is I can control so please let me know about that.

https://www.realtycontents.com/wp-admin/customize.php?return=%2Fwp-admin%2Fedit.php%3Fpost_type%3Dpage

Also, How Can I change red background and black colour for mobile mode? as below image;

please let me know where I can do, thank you.

https://paste.pics/500f5d5d7c867509743178205e3741df
https://paste.pics/ae90fe470847e9bde657cf9cf50c492e

[Elvin]

Hi,

How can I control the logo size on primary navigation for Mobile and tablet?

The logo size too small but I could not find where is I can control so please let me know about that.

@media (max-width:768px){
.navigation-branding img, .site-logo.mobile-header-logo{
    height: 100px;
}
}

Adjust the height value to your preference.

Also, How Can I change red background and black colour for mobile mode? as below image;

please let me know where I can do, thank you.

You can adjust these on Appearance > Customize > Colors > Sub-Menu Items.

[Kay]

Thank you for your quick response but please give me a little more tip below;

1) As you mentioned I tried to control background colour,
“You can adjust these on Appearance > Customize > Colors > Sub-Menu Items.”
So probably the sub-menu items are under Off-Canvas panel? I just want to double-check.

=> So, Appearance > Customize > Colors >> off-Canvas panel >> Sub-Menu Items ?

2) You gave me as below;

@media (max-width:768px){
.navigation-branding img, .site-logo.mobile-header-logo{
height: 100px;
}
}

I believe it will help a lot, but I don’t know where can I put these cord…
Please whare I can put the cord on which route, please guide litte more and sorry about that.

Thank you.

[Elvin]

=> So, Appearance > Customize > Colors >> off-Canvas panel >> Sub-Menu Items ?

Ah yes my bad. That is correct. 🙂

I believe it will help a lot, but I don’t know where can I put these cord…
Please whare I can put the cord on which route, please guide litte more and sorry about that.

Here’s how to add CSS to your site – https://docs.generatepress.com/article/adding-css/

[Kay]

I appreciate Elvin, resolved the colour issue but CSS is a little different from you so I could no find the same as what you did teach me.

So I paste the all CSS for Customizing > Additional CSS as below;

please give me the tip on which CSS, I can adjus for control logo size on top of navigation.

/* GeneratePress Site CSS */ /* grey line under navigation */

.site-header {
border-bottom: 1px solid rgba(0,0,0,0.1);
}

/* navigation subscribe underline */

.main-navigation:not(.slideout-navigation) .main-nav li.subscribe-button a {
box-shadow: 0px -8px 0px #e0314f inset;
transition: all 0.6s ease 0s;
padding: 0px;
margin: 0px 20px
}

.main-navigation:not(.slideout-navigation) .main-nav li.subscribe-button a:hover {
box-shadow: 0px -16px 0px #e0314f inset;
}

/* wpsp meta spacing */

.wp-show-posts-entry-meta {
margin-top: 10px;
}

/* wpsp column spacing */

.wp-show-posts-columns .wp-show-posts-inner {
margin: 0px 0px 40px 60px;
}

/* mailchimp form styling */

.mc4wp-form {
text-align: center;
}

.mc4wp-form input[type=text], .mc4wp-form input[type=email] {
background-color: #ffffff;
line-height: 28px;
border: 1px solid #aaa;
border-radius: 0px;
margin: 2px;
}

.mc4wp-form input[type=submit] {
line-height: 30px;
border: none;
border-radius: 0px;
margin: 2px;
transition: all 0.5s ease 0s;
}

@media (max-width: 768px) {
.mc4wp-form input[type=text], .mc4wp-form input[type=email], .mc4wp-form input[type=submit] {
width: 100%;
}
}

@media (min-width:1025px) {
.footer-widgets .footer-widget-1 {
flex-basis: 50%;
padding-right: 100px;
}
.footer-widgets .footer-widget-2 {
flex-basis: 20%;
}
.footer-widgets .footer-widget-3 {
flex-basis: 30%;
}
}

.mobile-header-navigation {
padding: 10px;
} /* End GeneratePress Site CSS */

[Elvin]

You can add the code I’ve provided before the /* GeneratePress Site CSS */ or after /* End GeneratePress Site CSS */.

It should be fine. 🙂

[Kay]

I just followed what you taught me, but the loge size is not bigger and only the height of the navigation increaded, please give me little more tip. Thank you.

Just in case I paste all CSS after add what you provied;

/* GeneratePress Site CSS */ /* grey line under navigation */

.site-header {
border-bottom: 1px solid rgba(0,0,0,0.1);
}

/* navigation subscribe underline */

.main-navigation:not(.slideout-navigation) .main-nav li.subscribe-button a {
box-shadow: 0px -8px 0px #e0314f inset;
transition: all 0.6s ease 0s;
padding: 0px;
margin: 0px 20px
}

.main-navigation:not(.slideout-navigation) .main-nav li.subscribe-button a:hover {
box-shadow: 0px -16px 0px #e0314f inset;
}

/* wpsp meta spacing */

.wp-show-posts-entry-meta {
margin-top: 10px;
}

/* wpsp column spacing */

.wp-show-posts-columns .wp-show-posts-inner {
margin: 0px 0px 40px 60px;
}

/* mailchimp form styling */

.mc4wp-form {
text-align: center;
}

.mc4wp-form input[type=text], .mc4wp-form input[type=email] {
background-color: #ffffff;
line-height: 28px;
border: 1px solid #aaa;
border-radius: 0px;
margin: 2px;
}

.mc4wp-form input[type=submit] {
line-height: 30px;
border: none;
border-radius: 0px;
margin: 2px;
transition: all 0.5s ease 0s;
}

@media (max-width: 768px) {
.mc4wp-form input[type=text], .mc4wp-form input[type=email], .mc4wp-form input[type=submit] {
width: 100%;
}
}

@media (min-width:1025px) {
.footer-widgets .footer-widget-1 {
flex-basis: 50%;
padding-right: 100px;
}
.footer-widgets .footer-widget-2 {
flex-basis: 20%;
}
.footer-widgets .footer-widget-3 {
flex-basis: 30%;
}
}

.mobile-header-navigation {
padding: 10px;
} /* End GeneratePress Site CSS */

@media (max-width:768px){
.navigation-branding img, .site-logo.mobile-header-logo{
height: 100px;

https://www.realtycontents.com/wp-admin/customize.php?return=%2Fwp-admin%2Fthemes.php%3Fpage%3Dsimple-css

[Elvin]

Try this instead:

@media (max-width:768px){
.navigation-branding img, .site-logo.mobile-header-logo{
height: 100px !important;
}
}

@media (max-width:1024px) and (min-width:769px){
.navigation-branding img, .site-logo.mobile-header-logo{
height: 100px !important;
}
}

Make sure to purge/clear your cache after applying this. Your site seems to be using one (WP rocket?).

[Kay]

I did what you taught me but still not changed the loge size on mobile mode.
Also I made sure to purge/clear and just in case deactivated WP rocket, but still not changed.
Please help me how I can fix this. Thank you.

/* GeneratePress Site CSS */ /* grey line under navigation */

.site-header {
border-bottom: 1px solid rgba(0,0,0,0.1);
}

/* navigation subscribe underline */

.main-navigation:not(.slideout-navigation) .main-nav li.subscribe-button a {
box-shadow: 0px -8px 0px #e0314f inset;
transition: all 0.6s ease 0s;
padding: 0px;
margin: 0px 20px
}

.main-navigation:not(.slideout-navigation) .main-nav li.subscribe-button a:hover {
box-shadow: 0px -16px 0px #e0314f inset;
}

/* wpsp meta spacing */

.wp-show-posts-entry-meta {
margin-top: 10px;
}

/* wpsp column spacing */

.wp-show-posts-columns .wp-show-posts-inner {
margin: 0px 0px 40px 60px;
}

/* mailchimp form styling */

.mc4wp-form {
text-align: center;
}

.mc4wp-form input[type=text], .mc4wp-form input[type=email] {
background-color: #ffffff;
line-height: 28px;
border: 1px solid #aaa;
border-radius: 0px;
margin: 2px;
}

.mc4wp-form input[type=submit] {
line-height: 30px;
border: none;
border-radius: 0px;
margin: 2px;
transition: all 0.5s ease 0s;
}

@media (max-width: 768px) {
.mc4wp-form input[type=text], .mc4wp-form input[type=email], .mc4wp-form input[type=submit] {
width: 100%;
}
}

@media (min-width:1025px) {
.footer-widgets .footer-widget-1 {
flex-basis: 50%;
padding-right: 100px;
}
.footer-widgets .footer-widget-2 {
flex-basis: 20%;
}
.footer-widgets .footer-widget-3 {
flex-basis: 30%;
}
}

.mobile-header-navigation {
padding: 10px;
} /* End GeneratePress Site CSS */

@media (max-width:768px){
.navigation-branding img, .site-logo.mobile-header-logo{
height: 100px !important;
}
}

@media (max-width:1024px) and (min-width:769px){
.navigation-branding img, .site-logo.mobile-header-logo{
height: 100px !important;
}
}

[Elvin]

Ah I see why.

I forgot to include img on the css selector. My bad.

Try this:

@media (max-width:768px){
.mobile-header-navigation .site-logo.mobile-header-logo img {
    height: 100px;
}
}

@media (max-width:1024px) and (min-width:769px){
.mobile-header-navigation .site-logo.mobile-header-logo img {
    height: 100px;
}
}

This one should work as shown here: https://share.getcloudapp.com/5zuwlADK

[Kay]

Finally, It is working now after that, I learnt again and appreciate what you supported! ^^

[Elvin]

Finally, It is working now after that, I learnt again and appreciate what you supported! ^^

Apologies for the errors. Glad its working for you now. No problem. 🙂

[Kay]

No Problem, I understand you gentleman always stay in front of the PC and watching monitor, you already help me a lot. You save me a lot of time. Thank you.^^

[Elvin]

No Problem, I understand you gentleman always stay in front of the PC and watching monitor, you already help me a lot. You save me a lot of time. Thank you.^^

Good to know. Feel free to open up new topics if you have any other issues.

Cheers.

[Author]

Posts