Changing padding between text links in top menu

  • Resolved clord2015

    (@clord2015)


    9 years, 8 months ago

    Hi Tomas,
    I am using Tiny Framework (thanks, it’s great!), but I want to make the page links in the top menu more narrow; in Firefox, the menu is too long, and breaks onto a second line. In Chrome and IE, however, the top menu fits on one line.

    I have looked in the css files, but I cannot find where you specify the padding between the text links in the top menu. If I could reduce the px/rem between each page name, I could probably get it to where it looks the same in Firefox as it does in Chrome and IE.

    Thanks in advance for any assistance you can provide.

    Cheers,
    Bud

Viewing 4 replies - 1 through 4 (of 4 total)
  • Theme Author Tomas Mackevicius

    (@tomasm)

    Hi, it is under 783px media query:

    @media screen and (min-width: 783px) {
	.main-navigation li {
		position: relative;
		margin: 0 40px 0 0;
		margin: 0 2.5rem 0 0;
		font-size: 12px;
		font-size: 0.75rem;
		line-height: 1.42857143;
	}
}

    Just change the margin.

    Thread Starter clord2015

    (@clord2015)

    Thanks for the quick reply, Tomas.

    I was probably not specific enough earlier, so I will be much more specific now.

    I am trying to edit the theme:
    Tiny Framework Child Example

    When I open the Stylesheet for that theme (style.css) and search for any instances of “783px” in the file, I find this is the only one:

    @media screen and (min-width: 783px) {
    /* Tip52 – Adjust default site layout for normal view */

    /*
    .content-area {
    float: left;
    width: 65.104166667%;
    }
    .widget-area {
    float: right;
    width: 30.5%;
    }
    */

    There is no margin parameter to change, as is present in the code you provided:

    @media screen and (min-width: 783px) {
    .main-navigation li {
    position: relative;
    margin: 0 40px 0 0;
    margin: 0 2.5rem 0 0;
    font-size: 12px;
    font-size: 0.75rem;
    line-height: 1.42857143;
    }
    }

    I also searched for instances of “.main-navigation li”, and that string is not present in style.css.

    Am I even in the right file? Because I cannot locate any margins to edit under the 783px media query.

    Again, many thanks for the help.

    –Bud

    Theme Author Tomas Mackevicius

    (@tomasm)

    That’s good, just insert that .main-navigation li part inside child’s 783 media query.

    Thread Starter clord2015

    (@clord2015)

    Yep, should have thought of that.

    Worked perfectly.

    Many thanks!

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Changing padding between text links in top menu’ is closed to new replies.