[Resolved] styling hearder

[Author]

Posts

[Jeffrey]

Hello, I am going to style the header of my site. it includes, Logo, menu, search icon and login logout link. I did like below step by step
1st. created a grid row with 12 columns.
2nd. split 2 columns for logo, 6 columns for menu, and rest 4 columns for search icon and login link, etc. (I didn't embed the links to wordpress menu, because I want to use conditional output ).

but issue came out, why the rest 4 break the link on mobile device? how can I fix the menu icon and 4 elements in line like your site? could you please give me some suggestion about that? whether or not I must replace the default menu module with bootstrap code? Thank you so much!
Best regards

[Luo Yang]

Dear Jeffrey,

It is depends on your theme file, the menu of URL (https://toolset.com/account/) is using Booststrap menu, if you need same menu, you will need to apply Booststrap framework into your website, see their document:
hidden link

[Jeffrey]

Hi Luo, Thank you so much for your reply, I am now using toolset starter. Before I have seen that article of Bootstrap Navbar. I think I am able to embed the code to header, but I guess if I use it , wordpress menu will be avoid. that means I can not take advantage of that convenience. moreover, I saw a article about registering self owned menu with wordpress using function.php. I need to balance which way is easier for me. :), can I just insert those elements to header using toolset layout without changing menu? I suppose whether or not I just adjust CSS? Thank you so much!

[Luo Yang]

Yes, it is very simple with Layouts plugin. You can try this:
1) Setup a new nav menu:
Dashboad-> Appearence-> Menus

2) create a layout with header and footer section, setup it as a parent layout
https://toolset.com/documentation/user-guides/hierarchical-layouts/

3) In above parent layout, insert a menus cell into the it, see our document:
https://toolset.com/documentation/user-guides/menu-cell/

4) Create different child layout for page/post types/archive pages

You can find more documents about the Layouts plugin here:
https://toolset.com/documentation/user-guides/#layouts

[Jeffrey]

谢谢你的回答。但可能咱们的意思没有对上，我知道用menu 组件。 但是 我把header 行分成了 logo， menu 还有editor然后加上ｓｈｏｒｔｃｏｄｅ之后，右侧的部分在移动端上 掉到了第二行。我在想怎么样才能像你们的导航一样，在移动端上面左侧logo　右侧是 登陆的icon和搜索icon 然后是ｍｅｎｕ，我不想要把登陆放到WP原生的menu里面，因为没有办法逻辑输出。此外我也比较喜欢 移动端此一部分一直固定在导航上面。而不是隐藏在触发按钮里面的。谢谢你 🙂

[Luo Yang]

问题1） 我在想怎么样才能像你们的导航一样
你可以参考我们网站的HTML 设置你自己的layout,例如：

<div class="row">
	<div class="col-sm-1  col-xs-1">标题 and Logo</div>
	<div class="col-sm-11 col-xs-11">
		<div class="row">
			<div class="col-sm-8">
			导航菜单
			</div>
			<div class="col-sm-4">
			搜索和登录
			</div>
		</div>
	</div>
</div>

更多帮助请参考BootStrap文档：
hidden link

问题2） 此外我也比较喜欢 移动端此一部分一直固定在导航上面
我建议你参考Bootstrap 文档设置你的导航菜单：
hidden link
还有这个帖子：
https://stackoverflow.com/questions/12701212/how-can-i-make-twitter-bootstrap-collapsable-navbar-opened-by-default
这是个新问题，如果依然有疑问，请开新帖， 这样方便其他用户查找

[Jeffrey]

谢谢你的回答，但是我是用Layout, 顶部导航位置menu部分是一个组件。没有办法像编辑器一样的写代码，难道是有menu 的ｓｈｏｒｔｃｏｄｅ 吗？使用grid system, 我还算有一点熟悉这个我可以写出来，可是wp自带的ｍｅｎｕ在Layout中是一个组件 无法把它写到grid system里面，难道是需要直接把bootstrap 的navbar代码写进去吗？

[Luo Yang]

如果你是使用Layout插件，那么你不需要写这些代码，你只需要把对应的组件放进对应的格子里面，另外你可以考虑在相应的单元格加入grid cell，
https://toolset.com/documentation/user-guides/learn-creating-using-grids/

如果你需要更多帮助，请提供一个测试网站，我可以给你设置一个demo。

[Luo Yang]

我在你的网站做了如下改动：
1) 创建一个新layout “styling hearder”:
hidden link

为每个visual editor cell 设置 CSS class为"col-xs-**", 例如，你可以编辑其中一个visual editor cell,在弹出的窗口往下拖，你可以看见一个选项Tag classes (optional)，在这里设置CSS名，参考截图
styling-hearder.JPG

结果页面：
hidden link
你可以缩小浏览器窗口至手机大小，可以看到单元格不会换行

参考相关文档:
https://toolset.com/documentation/user-guides/adding-custom-styling-to-a-layout/#cell
Styling individual cells
hidden link
Extra small devices Phones (<768px)
Class prefix .col-xs-