Control Spacing of Navigation items and Social Media Profiles

sileibo · 2015-04-12 23:32:16

I am struggling to have control of the spacing between navigation menu items and also with the social media icons as well.

With the navigation items, Justify doesn't seem to have any effect and looks exactly the same as Left?

I would like to set Padding left and Right to keep the items away from the edges of the navigation bar and then Justify between those points.

How to approach this?

thanks

rod barbee · 2015-04-13 03:15:47

Under Navigation Items you can use the Margin-left and Margin-right settings to affect spacing between the items.

not sure about the Justify setting. I don't see it doing anything either

Matthew · 2015-04-13 15:59:27

Justify is a standard CSS property that works on paragraphs. For the purposes of short list-items, it's basically the same as Left.

NursultanTulyakbay · 2015-04-19 08:02:24

Another question about the social media profiles. I cannot seem to set these to show in the navigation column. It works in all the other places but when I select navigation column they don't show. I have tried adjusting the font size of my navigation column to be larger than the social media profile font size in case that was causing it to not show, but it still seems to not be visible. Right, left or justify also seems to have no effect. Is this a bug or is there something else that I am not doing right? This is the ideal place for this things with my page design. Thanks.

rod barbee · 2015-04-19 09:36:50

Social Media sharing icons won't go in the navigation container. The option "Beneath Navigation" may be better read as "After Navigation" as they are in their own container. The options just moves that container so that it appears in the html as coming after the navigation (beneath in the document structure), or after the end of the block.

So if using Column navigation and you choose the "Beneath Navigation", the sharing icons will appear at the top of the page beneath the masthead.

The only way to get them to appear inside the navigation container would be to customize using phplugins.

rod barbee · 2015-04-24 06:27:10

In case you're interested in moving your social sharing icons into the column navigation area, I just posted a tutorial on how to do it: http://ttg-tips-and-tricks.barbeephoto. … avigation/

NursultanTulyakbay · 2015-05-03 06:22:09

rod barbee wrote:

Social Media sharing icons won't go in the navigation container. The option "Beneath Navigation" may be better read as "After Navigation" as they are in their own container. The options just moves that container so that it appears in the html as coming after the navigation (beneath in the document structure), or after the end of the block.
So if using Column navigation and you choose the "Beneath Navigation", the sharing icons will appear at the top of the page beneath the masthead.
The only way to get them to appear inside the navigation container would be to customize using phplugins.

Hi Rod, Sorry I wasn't clear on what I was asking. I am talking about the social media profile icons that link to my facebook/google+/twitter/etc pages, not the icons my visitors use to share the page through their social media accounts.

I see the option to set the location of these in the navigation column, but I as I explained before - it doesn't show when I select this option.

Ideally I would like my navigation column to look like this

rod barbee · 2015-05-03 07:03:56

the column navigation places the navigation in a column on the left side of the page. Putting the Profiles with column nav places the Social Media profiles below the column:

What you want to do is to place the social profiles within the navigation container. For that you'll need to take the phplugins route. The process is almost exactly the same as in my tutorial, only you'll need to copy the Social Profiles html rather than the sharing html.

sileibo · 2015-06-18 05:55:57

Matthew wrote:

Justify is a standard CSS property that works on paragraphs. For the purposes of short list-items, it's basically the same as Left.

Re-visting this old thread ....

Are you saying there is no way to Justify the Menu items with them equally spaced between two given points?

ie. Pad first Menu item with left hand side indent/margin by 10 px and last Menu item Pad/indent/margin 10px from right hand edge .... then space equally between those points?

rod barbee · 2015-06-18 08:20:35

it would definitely involve custom css and depends on if you're using single level or multi-level navigation.

Assuming multi-level, you could probably apply margins to the list items in percentages to account for varying browser width as well as assigning a width to each list item, also based on percentage and taking into account the margin.

For instance, five navigation items would take up 20% of the available space (width of the containing unordered list element)

so maybe something like:

#nav li {
width: 12%;
margin-left: 4%;
margin-right: 4%;
}

You may need to be more specific than just#nav li for the selector

Just a quick look at my own site and using the browser inspector to change some css, this seems to work but you'll also need to remove the float from the ul:

ul#nav {float: none;}

I've not tested this, just messed around a bit with the inspector, so there are probably other considerations.

one problem would be if the text for the label of any of the navigation items takes up more than that the percentage allotted to each list item. If it's too long you'll get ellipses, so it still looks good.

and if you wanted to apply :first-child and :last-child margins to give the first and last items 10px of margin on the left and right, respectively, then it gets more complicated.

Single level navigation is a little different, but I think the concept would be similar, just use the browser's inspector to find the correct selectors. More on that here: http://ttg-tips-and-tricks.barbeephoto. … selectors/

looks like it would be p#nav span

Matthew · 2015-06-18 15:43:43

sileibo wrote:

Are you saying there is no way to Justify the Menu items with them equally spaced between two given points?

I'm saying that's not what text-align: justify; is meant to do, and that it's not a feature supported by our plugins' options. Such would require knowing exactly how many menu items are in the menu, then styling the width of those items based on that number, 100/x. So if you have four menu items, then each would need to be 25% width, with 0 margins, and center aligned.

As we allow users to create as many menu items as they like, the plugin has no way of knowing how many menu items exist. We could use Javascript to count them, but that would be extra code that most users don't need, and I'm basically done with redesigning the general page framework in CE4 (meaning that menus, mastheads, etc. are not likely to change).

Community @ The Turning Gate

#1 2015-04-12 23:32:16

Control Spacing of Navigation items and Social Media Profiles

#2 2015-04-13 03:15:47

Re: Control Spacing of Navigation items and Social Media Profiles

#3 2015-04-13 15:59:27

Re: Control Spacing of Navigation items and Social Media Profiles

#4 2015-04-19 08:02:24

Re: Control Spacing of Navigation items and Social Media Profiles

#5 2015-04-19 09:36:50

Re: Control Spacing of Navigation items and Social Media Profiles

#6 2015-04-24 06:27:10

Re: Control Spacing of Navigation items and Social Media Profiles

#7 2015-05-03 06:22:09

Re: Control Spacing of Navigation items and Social Media Profiles

#8 2015-05-03 07:03:56

Re: Control Spacing of Navigation items and Social Media Profiles

#9 2015-06-18 05:55:57

Re: Control Spacing of Navigation items and Social Media Profiles

#10 2015-06-18 08:20:35

Re: Control Spacing of Navigation items and Social Media Profiles

#11 2015-06-18 15:43:43

Re: Control Spacing of Navigation items and Social Media Profiles

Board footer