Support » Fixing WordPress » Storefront – Logo and Navbar

  • Resolved enrico1111

    (@enrico1111)


    Hello, I need help with the layout of this website.

    I made a child theme of ‘Store front theme’.

    I am trying to center the logo without losing the quality, the logo uploaded size have 2967 x 720 pixels but the quality is very poor when centering it with a additional CSS

    .custom-logo {
    width : 100%;
    }

    I also want to center the navbar on pc devices and on mobile devices. I tried everything but I have no success.

    Hope someone can help me out! Thankyou!

    The page I need help with: [log in to see the link]

Viewing 10 replies - 1 through 10 (of 10 total)
  • Dear enrico1111

    Thank you for reaching out to the support forums! I have taken a look at your problem and website mentioned with your question.

    Your logo
    I was able to determine that the source image used for your logo has this dimensions: 435x110px. Therefore if you stretch the image, it looks blurry. I would recommend you to take a look at your WP-media file of the image used, maybe you accidentally cropped it or a plugin on your install is limiting the dimensions of your images.

    Your navigation bar
    For your second problem I have written a general little sample code to center navigation bars. You can take a look at the architecture of it and apply this to your website.

    CSS

    #nav {
    text-align:center;
    }
    #nav li {
    display:inline;
    }
    #nav a {
    text-decoration:none; 
    padding:0 30px; /* variable width */
    }

    HTML

    <ul id="nav">
      <li><a href="#">Menu 1</a></li>
      <li><a href="#">Menu 2</a></li>
      <li><a href="#">Menu 3</a></li>
    </ul>

    I’m hoping this will solve your problem. Don’t hesitate to reply if you need further assistance.

    Thread Starter enrico1111

    (@enrico1111)

    Hi Jeans, thank you very much for the fast answer!

    I did not crop the image wrong, but I see this : Suggested image dimensions: 470 by 110 pixels.

    Do you have any idea how to change this default option of 470 by 110 pixels?

    About the navbar, its working very well thank you, but when opening on mobile devices the nav toggle is not really responsive do you have any tips to center it too?

    Thanks again!

    Dear enrico1111

    I’m happy to read that I could resolve a part of your problem! We can discuss on the other part of the case now.

    Imagery
    The suggested size of the image could be proposed by your active Jetpack plugin. This plugin is created to boost the website performance and may adapt some changes to do so. If I’m correct you could tick off this sort of proposals in the Jetpack preferences.

    Mobile navigation button
    Understanding you correctly I have written some sample code to help you tweak the nav-button on mobile devices. It looks pretty nice as I say it myself!

    Screenshot of your new button

    Please add this code to class button.menu-toggle

    width: 100%;
    float: none;
    margin: 0 auto;

    I’m hoping this will solve your problem. Don’t hesitate to reply if you need further assistance.

    Thread Starter enrico1111

    (@enrico1111)

    Thank you very much Jeans, awesome!

    The navbar is pretty good now!

    I checked the jetpack for the image but I cant find anything to increase the width and height of the logo after uploading..

    Anyways thank you very much!

    Dear enrico1111

    Hooraay! I’m glad we could fix your navigation bar!

    Photon by Jetpack
    After some further research that I’ve done I could state that Jetpack (more specifically Photon by Jetpack) is resizing your dimensions to as little as possible. Please inform yourself how to disable or adapt their setting on their Photon by Jetpack FAQ-page.

    I’m hoping this will solve your problem. Don’t hesitate to reply if you need further assistance.

    Thread Starter enrico1111

    (@enrico1111)

    Hello Jens,

    I checked it out it have nothing to do with Jetpack Plugin.

    What I notice is that the logo size match excactly the same as the suggested image dimension at the upload screen.

    Maybe if I can change that the logo automatically fit?
    If I upload as header we get the image as we wanted but then the navbar is going thru the header
    Do you have any idea how to fix the default size of the logo or bring the navbar below the header image?

    Thankyou

    Dear enrico1111

    Sure, you can try to upload a fixed dimension for your logo. Keep me updated on that matter!

    I’m hoping this will solve your problem. Don’t hesitate to reply if you need further assistance.

    Thread Starter enrico1111

    (@enrico1111)

    Hi Jens,

    What do you mean with ‘Upload a fixed dimension’ to fix my problem?

    I uploaded a logo with a dimension of 1024×720 but wordpress automacally rezize it to 410×110. I dont want that this happen, how can I fix it?

    Thankyou

    Thread Starter enrico1111

    (@enrico1111)

    Its now looking like that :

    http://classicitalianbikes.com/wp/

    How can I move only the nav menu a down? When I try to move with :

    .nav-menu {
    margin-top: 200px;

    }

    The image of the header duplicate, I only want the menu could you help me do that?

    Thankyou!

    Thread Starter enrico1111

    (@enrico1111)

    I already did it!

    Thank you anyways! #closed

    • This reply was modified 3 years, 5 months ago by enrico1111.
Viewing 10 replies - 1 through 10 (of 10 total)
  • The topic ‘Storefront – Logo and Navbar’ is closed to new replies.