How to extend the clearly visible portion of menu bar

I have added some new pages with the result that some of their titles are not showing clearly on the white menu bar, but rather are barely visible on the wood background below it. I want to adjust the bar so that all will be clearly visible. I also want to remove the drop down menu under publications, so that the only option is to click on "publications" to see the contents.

  • Kasia Swiderska

    Hello Jon,

    I want to adjust the bar so that all will be clearly visible.

    Your menu background is not constructed to handle more than one line of the menu items inside. At the moment we can try to squeeze those elements so they fit that bar. This is CSS for that

    .nav-main a:link, .nav-main a:visited {
    font-size: 12px;
     padding-right: 8px;
    padding-left: 7px;
    }

    You can
    a) add it to the child theme style.css file if you are using one
    b) use this small plugin https://wordpress.org/plugins/simple-custom-css/

    . I also want to remove the drop down menu under publications, so that the only option is to click on "publications" to see the contents.

    You should be able to do that in your WordPress Admin dashboard Appearance -> Menus. You will see there something like on my screenshot (its form my site, so menu items will be different for your site)

    Dropdowns are created by indented items - when you click on those elements you will see red link "Remove". This will remove them, so they will not be visible anymore in menu.

    Let me know if this helps and if you have more questions.

    kind regards,
    Kasia

  • Jon

    Hi, Kasia - I hope you're doing well. Thanks for your suggestions, bu they did not help me fix anything.

    On the first question of fitting more titles into the menu bar, I added the simple-custom-css plugin, but I don't know how to use it. Since menu is not on a page, I do not know where I would put the code you gave me. I looked under appearance/ menu but I still don't see where it would go. the only option I can actually see how to do is create menu. Can you please look at my dashboard and give me more specific instructions?

    On the second question I clicked on the indented titles in the appearance/ menu dashboard, but I did not see any option appear to delete these.

    I'd appreciate some further suggestions.

    Jon Sundell

    "d

  • Kasia Swiderska

    Hello Jon,

    On the first question of fitting more titles into the menu bar, I added the simple-custom-css plugin, but I don't know how to use it.

    If you installed that plugin on your site then you will get new position in Appearance menu "Custom CSS"

    On that page you will see field with text "/* Enter Your Custom CSS Here */" - remove that text and insert code I provided in previous post. Save. This will change menu looks.

    On the second question I clicked on the indented titles in the appearance/ menu dashboard, but I did not see any option appear to delete these.

    You should see "Remove" link like on my screenshot

    Can you please look at my dashboard and give me more specific instructions?

    Yes, but you need first enable support access (its not open).
    To enable support access you can follow this guide here:
    http://premium.wpmudev.org/manuals/wpmu-dev-dashboard-enabling-staff-login/

    kind regards,
    Kasia

  • Jon

    Katia -

    Thanks for the additional instructions on giving me more space on the menu bar. Now, I'd like to changes a few of the titles and the order of the pages (& the menu), but I can't figure out how to do that.

    I have enabled support access, so you should be able to see my dashboard now to give me exact directions on removing the drop down menu for Publications. I still can't see a delete option for that. I also want to remove the shorter version of Stay with Us that appears from the drop down menu and leave only the full version that appears from the menu bar itself.

    Thanks,

    Jon Sundell

  • Kasia Swiderska

    Hello Jon,

    Ok, I now can see what is with the menus on your site.
    Problem is that you don't have any menu created so every page by default goes to menu (I know how it sounds :grinning:. Without specific, created menu you cannot manage elements.
    So when you are in Menus - create new menu - here is tutorial on how to do that https://www.youtube.com/watch?v=g_3H2tJRPpM
    with that menu you can rename, re-order, add and remove items in it. With drag and drop you will be able to re-order those elements there.
    Let me know if you need further assistance with that.

    Katia - Also, is there a way of making the new menu bold, since it is pretty small?

    Yes, change previous code to that one

    .nav-main a:link, .nav-main a:visited {
    font-size: 12px;
     padding-right: 8px;
    padding-left: 7px;
    font-weight: bold;
    }

    But you might then need to adjust paddings because bold font will make it wider - so last element can go to second line. In that case try changing 8px to 7px.

    kind regards,
    Kasia

  • Jon

    Hi, Katia - Your instructions worked great. I created the menu bar and rearranged the order with everything on it. I tried out using 13 pt to see if it would fit, but it didn't. I don't guess there's any way to expand the strip on which the menu shows, is there?

    I have another question. I've got a lot of photos loaded, that sometimes show down the gallery a lot (time of day), even though I used smush it. If I wanted to put some additional ones somewhere else and link them, do you have a recommendation for something that would maintain high quality in the photos? I tried youtube's system, but the photos don't look very clear.

    thanks for your help.

    Jon Sundell

  • Ash

    Hello Jon

    I don't guess there's any way to expand the strip on which the menu shows, is there?

    Please try the following css.

    .nav-main{
    float: none !important;
    }

    If it doesn't do what you wanted, then would you please post a screenshot about your issues? Use any editing tool and mark the point you meant saying "strip".

    I have another question. I've got a lot of photos loaded, that sometimes show down the gallery a lot (time of day), even though I used smush it. If I wanted to put some additional ones somewhere else and link them, do you have a recommendation for something that would maintain high quality in the photos? I tried youtube's system, but the photos don't look very clear.

    By default, wordpress or smush it neither of those lose the image quality. Would you please show me a link of your site where I can see image quality? Also attach an image here with original quality.

    Have a good day!

    Cheers
    Ash

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.