How to make a menu bar with xml data source responsive

[sajinaboo]

Hi,

I have a menu bar with its source derived from an xml data source. I have successfully created the menu bar, but bow I want to make that menu bar responsive. I have tried many options but I can’t get a correct solution. I hope for a answer here. The code is given as below.

<div id="abchome_menu_bar">
<table>
<tr>
<td width="auto" align="center" valign="middle" style="text-align:center">
<asp:Menu ID="Menu1" runat="server" Orientation="Horizontal" Width="94%" ondatabound="Menu1_DataBound">
<DynamicMenuStyle CssClass="IE8Fix" />
<LevelMenuItemStyles>
<asp:MenuItemStyle CssClass= "mainmenu" />
<asp:MenuItemStyle CssClass= "levelmenu" />
<asp:MenuItemStyle CssClass="sublevelmenu" />
</LevelMenuItemStyles>
<StaticSelectedStyle CssClass="selected" />
<DataBindings>
<asp:MenuItemBinding DataMember="Menu" TextField="text" ValueField="text" NavigateUrlField="url" />
<asp:MenuItemBinding DataMember="SubMenu" TextField="text" ValueField="text" NavigateUrlField="url" />
<asp:MenuItemBinding DataMember="Home" NavigateUrlField="url" TextField="text" ValueField="text" />
</DataBindings>
</asp:Menu>
<asp:XmlDataSource ID="XmlDataSource1" runat="server"></asp:XmlDataSource>
</td>
<td style="width: 100%" align="right">
<asp:Label ID="lblWelcome" runat="server" Style="font-style: italic;" ForeColor="White"></asp:Label>
</td>
<td style="text-align: right; width: 62px">
<asp:LinkButton ID="lbtnLogOut" runat="server"  ForeColor="White" Font-Size="10pt" Width="60px">Log Out</asp:LinkButton>
</td>
</tr>
</table>
</div>

Thanks & Regards,
Sajin A

[Paulie_D]

The first thing you are probably going to hear is “Don’t use tables for layout”

Secondly, if you could show us the output HTML and what CSS you have in a Codepen demo that would be more useful.

[Author]

Posts