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

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

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

Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #1523013
    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

    #1523030
    Elvin
    Staff
    Customer Support

    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.

    A wise man once said:
    "Have you cleared your cache?"

    #1523043
    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.

    #1523084
    Elvin
    Staff
    Customer Support

    => 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/

    A wise man once said:
    "Have you cleared your cache?"

    #1523103
    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 */

    #1523105
    Elvin
    Staff
    Customer Support

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

    It should be fine. 🙂

    A wise man once said:
    "Have you cleared your cache?"

    #1523108
    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

    #1523113
    Elvin
    Staff
    Customer Support

    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?).

    A wise man once said:
    "Have you cleared your cache?"

    #1523130
    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;
    }
    }

    #1523137
    Elvin
    Staff
    Customer Support

    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

    A wise man once said:
    "Have you cleared your cache?"

    #1523149
    Kay

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

    #1523158
    Elvin
    Staff
    Customer Support

    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. 🙂

    A wise man once said:
    "Have you cleared your cache?"

    #1523161
    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.^^

    #1524381
    Elvin
    Staff
    Customer Support

    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.

    A wise man once said:
    "Have you cleared your cache?"

Viewing 14 posts - 1 through 14 (of 14 total)
  • You must be logged in to reply to this topic.