›
Before you ask please READ THIS

Menu padding

zenpandazenpanda
in Photon Posts: 29
How to change the overall size of the menu box? I've been changing lots of settings in the customize theme options but cannot budge the size. I've looked in all these options:

[Header-Menu] - [Header - Main Settings] [Top space] - [Title Bar]

And the only thing I can seem to change is the padding between the menu links themselves, to squish closer together, but not the overall padding around that element. I want a super thin MENU bar. Because the size of it is actually taking up too much space over pictures and is distracting the first 2-3 albums that show up on a list

Thank you

Comments

  • AirAir
    Posts: 10,970
    Hello :-)

    You know that it only looks like that on your computer, and other users of your site may have different screen resolution and will experience different look.

    Anyway: Use this custom CSS 
    .navigation-bar{
        padding-right: 0px; /* value here was 40px */
    }
    With kind regards.
  • zenpandazenpanda
    Posts: 29
    Sorry there is a miscommunication with this. I'm looking to adjust/shrink the overall padding around all the words in the menu. If you look again at my picture, you will see the padding where the arrow is pointing to, but that goes around the whole element, not just -right. How to fix this please? I tried using your .nagivation-bar and adding in margin:0px, padding: 0px, and also tried height:0px to no avail.

    None of these seem to shrink it?

    .navigation-bar{
    Height:0px;
    margin:0px;
    padding: 0px; /* value here was 40px */
    }
  • zenpandazenpanda
    Posts: 29
    The area between dotted lines and the outer edge. Extra black area not needed, please need code to remove padding from that element. Thanks
    fixme.jpg
    819 x 605 - 411K
  • AirAir
    Posts: 10,970
    zenpanda said: If you look again at my picture, you will see the padding where the arrow is pointing to, but that goes around the whole element, not just -right
    I think only author of this picture could interpret it this way ;-)

    About overall size of header. You will have to shrink logo padding to 0 so it won't affect it. Also you have to shrink line-height and header min-height. This code should help: 
    
.top-menu > li > a, .top-menu > li > span.title, .top-menu .mega-menu > ul > li > span.title, .top-menu .mega-menu > ul > li > a {
    line-height: 40px; /* was 64px */
}
#header, #header-tools {
    min-height: 40px; /* was 64px */
}
#header .logo-container, #header .navigation-bar {
    height: 40px; /* was 64px */
}
    If this still wont give effect then please post live link to your site so I could see what is left that we should take care off.

    With kind regards.
  • jakemillerphotojakemillerphoto
    Posts: 65
    Dear Air I would like the same aesthetic - the logo floating free from the menu and the padding removed. I tried the custom CSS you've provided here to no avail. I'm at www.jakemillerphoto.com please advise - Jake
  • AirAir
    Posts: 10,970
    Hello:)

    I don't see any of above code in your custom CSS, so it can't work when it is not there:-)

    With kind regards.
  • jakemillerphotojakemillerphoto
    Posts: 65
    I put it in there but it didn't do anything so I took it out. I will put it in there again for you to examine now,
  • AirAir
    Posts: 10,970
    It works fine. You just have to drop height on your logo to lower value, as it is now keeping height of whole header.

    You said previously
    jakemillerphoto said: I would like the same aesthetic - the logo floating free from the menu and the padding removed
    This is not the same. Author of this topic only wanted to shrink area taken by header, when he had small logo.
    Making them(logo and menu) separate is not possible, you can only do tricks so it looks like that. Like here for example http://support.apollo13.eu/discussion/3544/menu-logo-question#latest

    With kind regards.

  • jakemillerphotojakemillerphoto
    Posts: 65
    Where do I drop height on the logo? In that custom CSS? Because I tried that here:

    #header .logo-container, #header .navigation-bar {
    height: 10px; /* was 64px */

    It seems to me that this should be set from the Logo Padding field to accept a negative integer.

  • AirAir
    Posts: 10,970
    From your CSS I see you have some value here:
    image

    If I am wrong, then just upload smaller image.

    With kind regards.
    ss-2015-12-09_17-51-50.png
    270 x 165 - 4K
  • jakemillerphotojakemillerphoto
    Posts: 65
    I don't get it still doesn't make the logo bigger than the menu background. Where is that Logo Height slider? Is that what I need to move?
    jake miller photo .jpg
    1800 x 1200 - 201K
  • AirAir
    Posts: 10,970
    This slider is in logo settings obviously :-) http://apollo13.eu/docs/photon/#!/customize_logo

    However I am lost now what you wish to achieve as you didn't state it clearly, and I feel like you are not decided. Maybe better start new topic, with your current effect, and screen shot what you exactly want. I am sure that author of this topic is now getting big spam on his mail box about your issues :-)

    With kind regards.
  • jakemillerphotojakemillerphoto
    edited December 2015 Posts: 65
    I misspoke. I do not want the logo bigger. I want to make the semi transparent menu underneath the menu slimmer using less top and bottom padding.
    Post edited by jakemillerphoto on
  • AirAir
    edited December 2015 Posts: 10,970
    If you wish to continue then please restrict what I asked you for(new topic creation). I am closing this topic.
    jakemillerphoto said: I want to make the semi transparent menu underneath the menu slimmer using less top and bottom padding.
    Then lower value in setting I posted on screen shot before. You have there set 75px height as I can see in source CSS.

    With kind regards.
    Post edited by Air on
This discussion has been closed.