On a website i'm developing, I have replaced a menu item with the logo of the company. However when using the breakpoints (menu shifts to a drop down) I'd like the logo to change to being a normal menu item like the rest, or even be able to remove it.
Demo link
The link is not working on my laptop but it was working fine with my android smart phone. I use Android debugger tool to inspect your site.
You can hide the logo inside the menu with css and media queries and add another logo above the navigation and show it only on desktop.
Below css could help.
#media (min-width: 800px){
.hide_desktop { display: none; }
}
#media (min-width: 801px) {
.hide_mobile { display: none; }
}
HTML markup
<div class="hide_desktop"><img src="logo.png"></div>
<ul class="showing">
<li><li>ABOUT</li></li>
<li>REVIEWS</li>
<li class="hide_mobile"><img src="logo.png"></li>
<li>SERVICES</li>
<li>CONTACT</li>
</ul>
Related
I have a Bootstrap 5 nav bar with stick-top. I have a search icon in the toolbar that opens a full width google search bar right below the nav bar. When I make the search bar sticky it is always available when the search icon is clicked. The problem is that the results are populated in the same div, over the main content, so they run off the bottom of the screen until you scroll to the end of the page and the search results scroll. If I don't make the search bar sticky the results populate between the search bar and the content of the page and works like it should. The problem is that unless the page is scrolled to the top the search bar is off the top of the page.
I need to have the search bar always visible when they search icon is clicked and the results to appear as part of the page, a separate scrollable container with a close or a new window.
Any help greatly appreciated.
my nav bar code
<nav class="navbar sticky-top navbar-expand-xl start-0 end-0 p-1">
my google search code
<div id="target2" class="text-center hidden w-100" style="padding-top:0px; position:absdolute; top:50px; background-color:#3048e9; width:90%;">
<script async src="https://cse.google.com/cse.js?cx=*****************"></script>
<div id="cse" style="width: 100%; margin:0 auto; padding:5px; padding-top:0;">
<div class="gcse-search"></div>
</div>
</div>
I use the "SB Admin 2" Theme for a project.
The integratet Metis Menu works very well on desktop, also on tablet.
But when I visit the page with my phone, the menu doesn't hide completely.
Only when I scroll the page.
You can visit https://blackrockdigital.github.io/startbootstrap-sb-admin-2/pages/index.html to test ist.
If you shrink the browser as far as its like a mobile screen, the menu does not hide.
I tried to do it on the bottom of my index.html file with $('#side-menu').metisMenu('collapse'); but it does not work. This is also defined in the sb-admin-2.js file. But it doenst work either.
Can you help me to get the menu hide completly, even on mobile devices?
Try downgrading the JQuery version to 2.1.3:
https://code.jquery.com/jquery-2.1.3.min.js
There are issues with metismenu with newer Jquery versions:
https://github.com/onokumus/metismenu/issues/128
You can do this with hiding it with css only
.navbar-top-links {
display: none
}
Or if you don't want to hide it always only on button click. Create a new button with these attributes before your current unordered list (ul)
<button type="button" class="collapse-2" data-toggle="collapse" href="#collapse2" aria-expanded="true">
And replace this code
<ul class="nav navbar-top-links navbar-right">
With this code
<ul class="nav navbar-top-links navbar-right navbar-expand-sm navbar-collapse panel-collapse collapse" id="collapse2">
I managed to get it working like this only you have to style the button and place it in the correct position.
I am trying to place an editable spreadsheet control in a webpage without the menus and toolbars. I saw the postings about this and the last one said to use Google Docs spreadsheet and then choose Publish. If you use "?widget=true&headers=false" then the menus and toolbars will be removed.
This works great. The only problem is the data is not editable! It's a static spreadsheet. Is there a way to get the google spreadsheet control in a web page without menus and toolbars but make it editable?
I simply put the spreadsheet control inside a div and used the div to cover up the tool bars and scroll bars, etc. Worked great.
Here is the html:
<div id='spreadsheet' style="position:absolute; top: 900px; left: 3px; width: 1058px; height: 350px;overflow: hidden">
<iframe style="position:relative; top: -143px; left: -48px; width: 1140px; height: 650px;" src="https://docs.google.com/spreadsheets/d/1zt7JNkuqYKGKxRXSTtgjWeUFnCxRjSLB0UKs1oJk6PY/edit#gid=1047354991?widget=true&headers=false" width="600" height="600"></iframe>
</div>
I have simple treeTable. http://www.primefaces.org/showcase/ui/treeTable.jsf
I want to change expand and collapse icon of this treeTable. How can I do that?
If you want to use custom icons (images), override the following CSS classes for their respective uses, on the treetable:
ui-icon : to customise the expanded-row state icon (the triangle)
.ui-icon {
width: 16px;
height: 16px;
background-image: url("/your-image-here");
}
ui-icon-triangle-1-e ui-c : to customize the collapsed-row state icon
If you want to use more modern fontAwesome 'icons', see Change icon from jQuery UI to FontAwesome in PrimeFaces
I am trying to style the master page in Sharepoint Foundation 2010. I"m using the nightandday master and styles.
The design has no ribbon and I just need to turn it off. Just plain old off. When I set the ribbon div to display: none, the entire top banner disappears.
I'm not a sharepoint dev and am lost in general. Is there an easy way to just hide/get rid of the ribbon? Nothing fancy about permissions required--just needs to be always gone.
The CSS classes you want to look at are;
<style type="text/css">
div#s4-ribbonrow.s4-pr.s4-ribbonrowhidetitle { height:43px !important }
/*.ms-cui-ribbon { display:none; }*/
.s4-ribbonrowhidetitle s4-notdlg noindex { height: 43px !important; }
.s4-title h1 a,.s4-title h2 a,.s4-title h2 { font-size: small; }
.ms-pagetitleareaframe table { background: none; }
#s4-leftpanel-content { display:none !important; }
#s4-titlerowhidetitle { display:none !important; }
.s4-ca { margin-left:0px !important; margin-right:0px !important; }
</style>
You should be able to use the information in this article to get you started.
http://www.endusersharepoint.com/2010/11/09/hiding-the-sharepoint-2010-ribbon-from-anonymous-users/
In case someone has been struggling with this issue. Hiding the Ribbon may cause some further issues (http://social.msdn.microsoft.com/Forums/en-US/9422aa0f-5010-4691-a0ab-25e7aca6b478/issue-with-div-s4workspace-and-scroll-bar)
Especially if you will include your own header and hide the Ribbon.
A quick workaround is using css. #s4-workspace will still receive the correct height & scrollbar won't be an issue as well as the ribbon will be hidden.:
body #s4-ribbonrow {
height: 0px !important;
min-height: 0px !important;
}
As documented in the linked page of knight0323's answer, the ribbon can be hidden by editing v4.master and wrapping the ribbon div with <SharePoint:SPSecurityTrimmedControl/>:
<SharePoint:SPSecurityTrimmedControl PermissionsString="ManagePermissions" runat="server">
<div id="s4-ribbonrow" class="s4-pr s4-ribbonrowhidetitle">
<!-- Ribbon code appears here... -->
</div>
</SharePoint:SPSecurityTrimmedControl>
Unfortunately on my system this has a side-effect where the page's scroll-bar starts misbehaving. This appears to be a result of a dependency between the ribbon and the s4-workspace div. So to resolve this I moved <SharePoint:SPSecurityTrimmedControl/> in from the ribbon div to wrap the <div id="s4-ribboncont"> and added the following markup near the top of v4.master:
<style type="text/css">
#s4-ribbonrow { display: none; }
</style>
<SharePoint:SPSecurityTrimmedControl PermissionsString="ManagePermissions" runat="server">
<style type="text/css">
#s4-ribbonrow { display: block; }
</style>
</SharePoint:SPSecurityTrimmedControl>
The effect of this is that the ribbon is hidden by default but sufficient markup remains in the DOM so the page continues to behave correctly. For administrators, the ribbon is displayed normally.
In case anybody else is struggling with this, here are full instructions to do this without breaking the scroll bar or losing the title bar area, or any other oddities:
Hiding a Sharepoint 2010 ribbon that does not lose the titlebar area