Search code examples
twitter-bootstrap-3zikula

Zikula add block to topnav position in Bootstrap Theme

When I add the search block to the topnav in Bootstrap Theme, the login button is "broken"

ZK2.0.13 with Bootstrap Theme. When the block is added, the user login appear in a new line (example) A new line

I expect see topnav in a single line.

Solution

  • I found an answer for you. What I did was set up the page as you had it and then viewed it in Chrome. The app has some really nice dev tools for experimenting with css. Choose View->Developer->Developer Tools (Cmd-Option-I on a mac). From there right-click on the search box and choose inspect. You can then see on the right panel all the css that is affecting your element and see how the html gets laid out. I noticed that the search box was wrapped in a div with an input-group style so that was the one I wanted to mess with. I found if I added the below code it does what you want:

    .input-group {
    position: relative;
    display: table;
    border-collapse: separate;
    float: right !important;
    width: 200px;
    padding-top: 6px;
}

    The last three css commmands are the change that makes the difference. To fix the Bootstrap theme I went to themes/BootstrapTheme/Resources/public/css/style.css and added the above code to style.css. Don't forget to delete the cache folder in /var/cache (either prod or dev) before you test it out.

    One concern I have with this solution is that .input-group might get used elsewhere and this may interfere. A quick inspection didn't show it being used anywhere else except the search box. If it is somewhere else, you will have to create your own theme (not hard) and manually write some code.