I would like to place the Syndication Feed Module
in its simpliest form (only its icon), at the end of the top-menu of a site (position-1
of the protostar
template). Unfortunately, when affected to position-1
, the module appears on a new line below the menu items.
Does anyone have an idea of the nicest way to do that ?
Help would be greatly appreciated.
Here is what I get:
2 Answers
Here is your solution:
For you nav element add this CSS:
ul.nav{
display: inline-block;
}
For your feed link add this CSS
a.syndicate-module{
float:right;
line-height: 34px;
}
If you want the feed icon to be left aligned to the menu instead of floating to the right change the CSS to this:
a.syndicate-module{
display: inline-block;
vertical-align: top;
line-height: 34px;
}
Image links for you to see the difference:
-
This pulls the icon to the right but it is still in a line below the menu. I guess I need somthing that inhibits the
clear:both
that must be at the end of the CSS of the menu...– jcm69Feb 10, 2016 at 13:18 -
Can you give us a link to look at? You may have to adjust the CSS for a couple of elements. I can take a peek if you have a URL you can share.– Terry Carter ♦Feb 10, 2016 at 16:18
-
-
-
Many thanks for your help ! It almost works but if narrow the window so as for the top menu to take 2 lines (or if I add enough items to the menu), the RSS icon is pushed down out of the menu, below the horizontal line. Strange... Sorry.– jcm69Feb 15, 2016 at 17:28
Following Terry idea, I finally got it! The idea is to use display:inline-block for both ul.nav
and a.syndicate-module
and also to give a width to ul-nav
.
The menu can then have as many lines as he wants, the RSS icon will be displayed on its right.
So:
ul.nav{
display: inline-block;
width: 50%; /*to have a menu with many lines, 98% is the right value*/
}
and
a.syndicate-module{
float:right;
vertical-align:top;
display: inline-block;
}
Many thanks Terry, could not have found this without your help !