reactive sticky header
Hi all
I want to design a sensitive site where the header is 'sticky' and all the rest of the content scrolls upwards and underneath.
I used to be able to locate an element to the top of the page but now in the sensitive Muse if I I use sensitive pinning, say, pin it to the left, he pinned is more upwards and disappears when the page scrolling.
Is what I'm trying to do possible?
Thank you. K.
I think I've figured this out.
If you need States of rollover for each of your links in the header:
Create a button on the State and remove all the objects inside. Change the fill color for all States of turning to no fill. This move to the top of the page, make the width full page for your big breakpoint. This PIN to the top of the page.
Create another button of State and put this in your existing status button. Use sensitive pinning to pin the new status button to any side of the page you choose. Then change the text or image in the status button. Make sure that the size of the button of the State and the size of the text object it contains are the same. Set the reversal for the text States.
If you want a background color or background image for your header, which create and pin it to the top and make sure that it is below the buttons of the State in the layer stack.
If you do not need States of rollover for each of your links in the header:
Create a button on the State and remove all the objects inside. Change the fill color for all States of turning to no fill. This move to the top of the page, make the width full page for your big breakpoint. This PIN to the top of the page.
Add text boxes in the existing status button to create your links in the header. With versicles pins each of these text boxes to any side of the page you choose.
If you want a background color or background image for your header, which create and pin it to the top and make sure that it is below the buttons of the State in the layer stack.
I hope this helps! Took me to always to understand this, not through Adobe or one of the online tutorials. Is not terribly intuitive.
Tags: Adobe Muse
Similar Questions
-
I am building a site based on the "model" design #1 which comes from this page: http://www.Adobe.com/devnet/Dreamweaver/articles/dreamweaver_custom_templates.html#Templat are
And Im trying to make a sticky header following the tutorial on this page: http://www.noobcube.com/tutorials/HTML-CSS/fixed-header-footer-layout-a-beginners-guide-/
In the style sheet, before '.container .bannerArea' I put:
{#header-wrap}
position: fixed;
_position: absolute;
top: 0;
left: 0;
Width: 100%;
}
And in the source code:
< body >
< div id = "header-wrap" > < / div >
< div class = "bannerArea" >
But it does not work. So, any suggestions on how to make a sticky for 'model design #1' header would be appreciated.
Change what you have now in your body to this CSS selector:
{body
top of the margin: 100px; / * adjust to the REQ'd * /.
color: #777;
do-size: 12px;
do-family: Verdana, Arial, Helvetica, without serif.
background-color: #CFCFCF;
}Nancy O.
ALT-Web Design & Publishing
Web | Graphics | Print | Media specialists
http://ALT-Web.com/
http://Twitter.com/ALTWEB -
Header changes as you scroll down
Hello
I buy a template, the problem is when I scroll to the bottom of my logo in the header at the top just left and all navigation is reduced. I'm try when scroll down happened logo comes center and my navigation also come Center. I am not able to find the code. Please help for the same thing. A confirmation line is much appreciated.
Thank you
Maury
Look in Designesia.js and scroll down to
// --------------------------------------------------
Sticky header
// --------------------------------------------------
This should give you some clues on the classes in your style sheets.
It seems your main theme file style.css .
CTRL + F to search for .autoshow .header
Nancy O.
-
Scrolles content in the header.
Hello
I have a problem very anonying in MUSE that I can't seem to fix:
The content of my scroll on my head cover page.
I have a sticky header and I want to have the content in the page scroll beneath him. I tried the stack object in all sorts of ways, but I can't do whatever I want.
No idea what could be the problem?
Create a new layer (layer panel) on top of all the others, drag all the objects header on it, and everything will work as expected. Do not think that, if an object is at the top of a page master paster, he will be on top a layout page.
-
Positioning of elements of the CSS. format my header and keep him in a position fixed?
I have a few things here. Any help would be grateful. Thank you in advance.
I was styling my head, and it has become a bit more complex, kind of looked a little crazy. So I'm all stripping back so that I can totally understand how everything can be placed on a page (via the widths of margins, paddings, heights, line-heights etc. But even through a few tuts lynda.com, I always find it a bit confusing how control the positions of my items on the page. As you can see I have colored the colors of different backgrounds so that the items are easier to see. As well as the screenshots I posted ONLY relevant CSS/HTML
First of all, I use my head as my banner at the top of the page, which includes my h1, menu navigation nav text logo and links from social network button.
However, there is about a 10-20px gap/gray bar at the top of the page, which I suppose is my body (so the same color). I want to know how can transparent so that the Red header at the top is completely.
Next is social networking buttons (green). Above you can see that they are placed to the right of the page. However, given that I fixed the header so that it remains at the top of the page social buttons to go directly to the left of the page. Now I can solve this by using padding on the left side. This pushes the right buttons, but I really don't see that as a real solution, rather a twisted. I want to move the section to the right, not use margins and others to push the element.
Here is the HTML and CSS section for this part. You will see that I commented on a part of the code to try to figure out what is the issue. Feel free to play with it.
I appreciate that very much. Thank you.
<! doctype html >
< html >
< head >
"< link rel ="stylesheet"type =" text/css"href ="... / /CSS/style.css ">"
< meta charset = "UTF-8" >
< meta http-equiv = "content-type" content = "text" >
< meta http-equiv = "X-UA-Compatible" content = "IE = edge" >
< meta name = "viewport" content = "width = device-width, original scale = 1.0" >
creation of < title > BGDR < / title >
<!-the following script tag downloads a font of Adobe Edge Web server fonts to use in the web page. We recommend that you do not modify it.--> < script > var __adobewebfontsappname__ = "dreamweaver" < /script >
<!-the following script tag downloads a font of Adobe Edge Web server fonts to use in the web page. We recommend that you do not modify it.-->
<!-< script > var __adobewebfontsappname__ = 'dreamweaver' < /script >->
" < script src =" http://use.edgefonts.NET/quicksand:N3, i3, N4, I4, n7, i7:All.js "type =" text/javascript"> < / script > "
< / head >
< body >
"" <!-< img src = "... / Assests/Pics/dots_lines.gif" class = "dotimg" alt = "Points and lines in motion" >-->
< header >
<!-h1 is a text logo (I need to check to see have a h1 text logo is ok)->
< h1 id = "logo" role = "button" >
< a href = "Home.html" title = "return to the front page" role = "link" > "
< span id = "bgdr" >
BGDR
</span >
< br >
< span id = 'creative' >
Creative
</span >
< /a >
< / h1 >
< nav id = "nav" role = "navigation" align = "right" >
< ul >
< li > < a href = "Home.html" title = 'Go Home' rel 'next' = > FRONT PAGE < /a > < /li > "
< li > < a href = "About.html" title = "On BGDR" rel = "next" > ON < /a > < /li > "
< li > < a href = "CV.html' title ="CV"rel = 'next' > CV < /a > < /li >"
< li > < a href = "Blog.html" title = "A blog of my work and thoughts" > BLOG < /a > < /li > "
< li > < a href = "Contact.html" title = "contact me" rel = 'next' > CONTACT < /a > < /li > "
< /ul >
< / nav >
< br >
<!-Here's the social netowrking with < a > tags buttons put an external link-->
< section class = "social" role = "button" align = "right" >
" < a href =" https://Twitter.com/sambegdouri "title =" Tweet Me! "target ="_blank"> "
"" < img src = "... / Assests/Icons/twitter.svg" alt = "Twitter" width = "40" height = "40" >
< /a >
< a href = "..." "title ="Facebook Page"target ="_blank">
"" < img src = "... / Assests/Icons/facebook.svg" name = "Facebook" alt = "Facebook" width = "40" height = "40" >
< /a >
" < a href =" https://Instagram.com/sambegdouri/ "title ="My Insta Feed"target ="_blank"> "
"" < img src = "... / Assests/Icons/Insta.svg" height = "40" width = "40" alt = "Instagram" >
" < /a > < a href =" "" " https://UK.LinkedIn.com/in/sambegdouri title ' = 'My Linkedin profile' target = '_blank' > < img src ="... / Assests/Icons/linkedin.svg "height ="40"width ="40"alt ="Linkedin"> < /a > < / section >
< / header >
< / body >
< / html >
/ * This section is for! the value default global styling for the entire site * /.
HTML {}
margin: 0 auto;
padding: 0;
}
{body
Police-family: quicksand, didact-Gothic, without serif.
margin: auto;
make-style: normal;
Police-weight: 300;
height: auto;
Width: auto;
background-color: gray;
}
/ * This section isfor the header section that includes the header itself, my M1, the navigation bar text logo and social buttons Albums * /.
{to header
background-color: hsla(359,70%,46%,1.00);
position: fixed;
Width: inherit;
}
H1 {}
background-color: orange;
Width: 175px;
height: 83px;
/ * font size: 4;
text-align: justify;
color: black;
margin: 0;
position: inherit;
top: 0em;
left: 0.5em;
padding: 0;
top of the margin: 7px;
margin-bottom:-82px; * /
}
/ * {#logo
line-height: 30px
}
{#bgdr}
}
{#creative}
font-size: 0.6em;
letter-spacing: 0.04em;
padding-left:0.5%;
line-height: px;
}*/
a: link {}
color: hsla(0,0%,0%,1.00);
-webkit-transition: color 0.5 s ease-out;
-moz-transition: color 0. 5 s;
-o - transition: color 0. 5 s;
transition: color 0. 5 s;
text-decoration: none;
Police-weight: 500;
}
a: visited {}
color: hsla(0,0%,0%,1.00);
}
a: hover {}
color: hsla(0,0%,72%,1.00);
}
UL {}
/ * Here, the ul, li and .nav control the top nav menu * /.
background-color: blue;
list-style-type: none;
float: right;
position: inherit;
top: 5th;
right: 3em;
top of the margin: 0em;
right margin: 2.5em.
left margin: 0em;
margin-bottom: 0em;
Padding: 0em;
font size: 1.15em;
}
Li {}
float: right;
display: block;
Width: inherit;
left margin: 3em;
}
.the {}
position: inherit;
left: 1200px;
top: 0;
display: block;
Width: 11èm;
Padding: inherit;
Size: 1em;
background-color: green;
}
Sticky header using position: fixed.
-
Grouping data via GroupDataModel and DataSource
Hello
I'm loading below via a data source, the data correctly loads the XML data structure and the data are displayed in the ListView.
3 4.28 375802 Civic 589 Honda 375803 Accord 590 Honda 375804 Camry 591 Toyota The GroupDataModel & DataSource is set as shown below...
attachedObjects: [ GroupDataModel { id: dataModel // This works and the header is displayed properly by rating //sortingKeys: ["rating"] // Sorting does not work, and listview header is displayed @ top with empty data sortingKeys: ["manufacturer.name"] sortedAscending: true grouping: ItemGrouping.ByFullValue }, DataSource { id: dataSource // Load the XML data from a remote data source source: "http://www.mydataservice.com/getdata.php" query: "/dataresponse/search/results/cars" type: DataSourceType.Xml onDataLoaded: { // After the data is loaded, clear any existing items in the data // model and populate it with the new data dataModel.clear(); dataModel.insertList(data) } } ]The listview is defined per below...
ListView { id: myListView // Associate the list view with the data model that's defined in the // attachedObjects list dataModel: dataModel // Sticky header layout: StackListLayout { headerMode: ListHeaderMode.Sticky } listItemComponents: [ ListItemComponent { type: "item" // Use a standard list item to display the data in the data // model StandardListItem { imageSpaceReserved: false; title: ListItemData.car.model description: ListItemData.manufacturer.name + " ID: " + ListItemData.manufacturer.id } } ] }So, in order to be able to group the data by the automaker, I thought that I could just specify the following sort key sortingKeys: ["manufacturer.name"] but it does not work.
Any suggestions?
Hi joelajean,
According to the documentation on this link "In a GroupDataModel, there are only two levels of items". Looking at how your xml file is formatted, I can see that the manufacturer.name is a level deeper than the second level and this is probably why you can not retrieve the item. I suggest that you try to use a XmlDataModel instead of a GroupDataModel or analyze your file xml in two levels of items.
-
Hi guys, I use this Animated Drop Down Menu Responsive | MenuMaker CSS menu, but I want the fixed haveit position, so that when I scrolling, it always remains at the top of the page, nobody knows how to do and is it possible with this one?
P.S. I use Dreamweaver CC
Thank you
Make a fixed div and put your menu markup inside.
ALT-Web demos: CSS Sticky header
Nancy O.
-
I'm looking for a tutorial on how to shrink and the image.
So what I what to do is on the home page there is a big logo main when the page scrolls down it will move to the upper left corner (I know how to do this) then is will also shrink down or scale of a smaller image and then I'll get as sticky header. So let's say the logo is 350 x 250 and I want to cut it up to 150 x 75.
Hope that makes sense... How can I achieve this?
theDogger
You can use animations with spirals, or place with the installation of scrolling image so that when the Page is scrolled down to a specific location, then the big logo hides on the page and small logo appears which can be done using movement of scrolling.
Thank you
Sanjit
-
How to design pages above that remained stationary
Hello
I'm not sure my question is very clear, but let me rephrase it.
I try to have the same effect as when you use a worksheet with one or several lines remaining motionless when it moves to the bottom of the page.
Simply, I don't see how I can get the same effect with, say 2 pages, a relatively short in height and a second, which could be very long. When he scrolled down, the top of the page must remain fixed.
Clues on how to achieve this?
Thank you
Serge
It is difficult to imagine what you want. None of these examples come close?
Fixed Header & Footer Layout
http://ALT-Web.com/templates/FixedLayout.shtml
Fixed header
http://ALT-Web.com/demos/CSS2-sticky-header.shtml
Scrolling table
http://ALT-Web.com/demos/vertical-scrolling-table.shtml
Nancy O.
-
Fluid footer - all the way down
Hello
New models but fluid is code I have to add to make sure that the foot of fluid is at the bottom of the page, regardless of the absolute unit?
Thanks in advance.
MD
Here's how:
http://ALT-Web.com/demos/CSS2-sticky-header.shtml
http://ALT-Web.com/demos/CSS2-sticky-footer.shtml
NOTE: Headers and fixed are running well in all devices, especially the more iPhones and androids. So I do not recommend to do it in your page FluidGrid layout because it will probably cause problems of usability that beats the whole point of FluidGrid layouts.
Nancy O.
-
Site Web in Internet Explorer looks good, but not in firefox or safari?
I am currently underway with a website that is looking good in ie, but horrible in firefox and safari? It has something to do with css? In Dreamweaver, it previews fine in all browsers (apart from the spry accordion in firefox Panel, I guess that's another question, I need to deal with)? Totally confused!
Thank you very much
Lorraine
Your CSS and JS links pointing to your hard drive.
file:///C|/users/Lorraine/My Documents/Sticky heads folder/Sticky site Web heads 2011/2011 Sticky Chefs.css"rel ="stylesheet"type =" text/css">
file:///C|/users/Lorraine/My Documents/Sticky heads folder/Sticky heads 2011 Website/SpryAssets/SpryMenuBarHorizontal.css"rel ="stylesheet"type =" text/css">
should read something like
Sticky chefs.CSS 2011"rel ="stylesheet"type =" text/css">
-
How can I fixed listView header in GroupDataModel.
Hello
I want to set my header of the listview as a guess I put the listView header in GroupDataModel (Group: ItemGrouping.ByFirstChar). and now when scroll us in listview header must be fixed on what is the current title of the item in the listview. like Blackberry Hub.
Thank you
You can use the sample to reach this.
dataModel: GroupDataModel { grouping: ItemGrouping.ByFirstChar sortingKeys: [ "title" ] } layout: StackListLayout { headerMode: ListHeaderMode.Sticky } -
How can I make the header fixed while scrolling?
forget that, how can I make the header while scrolling fixed?
until this that no point visible in the header, it disappears as well.[title amended to reflect content]
Please keep to one question per thread.
You can assign the sticky HeaderMode...
-
Get the number of elements in the header in GroupDataModel
Hey everybody!
I wonder how to get the number of items in each topic in a GroupDataModel. Here's a code, where headerCount would be the number of items in each section:
ListView { dataModel: _app.dataModel layout: StackListLayout { headerMode: ListHeaderMode.Sticky } listItemComponents: [ ListItemComponent { type: "header" Container { Label { text: ListItemData + " " + headerCount } } }, ListItemComponent { type: "item" Container { Label { text: ListItemData.cardName } } } ] }Also here is the code of applicationui.cpp, where it defines the datamodel. It's using GroupDataModel.
void ApplicationUI::initDataModel() { // Note: The Group Data Model is joining this objects tree as a child (for memory management) m_dataModel = new GroupDataModel(this); m_dataModel->setSortingKeys(QStringList() << "cardType"); m_dataModel->setGrouping(ItemGrouping::ByFullValue); }Hope that makes sense. If you have any questions, let me know!
This will help you
Your header looks like this
ListItemComponent { type: "header" Container { id: rootItem Label { text: ListItemData + " " + rootItem.ListItem.view.dataModel.childCount(rootItem.ListItem.indexPath) } } } ..............It may be useful
-
import bb.cascades 1.0 Container { Container { preferredWidth: Infinity TopBrowse { layoutProperties: StackLayoutProperties { spaceQuota: -1 } } layoutProperties: StackLayoutProperties { spaceQuota: -1 } } Container { layout: DockLayout { } horizontalAlignment: HorizontalAlignment.Center verticalAlignment: VerticalAlignment.Fill ActivityIndicator { id: activityIndicatorBrowse objectName: "activityIndicatorBrowse" horizontalAlignment: HorizontalAlignment.Center verticalAlignment: VerticalAlignment.Center running: true } } Container { verticalAlignment: VerticalAlignment.Fill ListView { objectName: "customListBrowse" id: customListBrowse dataModel: GroupDataModel { id: theModel sortingKeys: ["accounts", "accounts2"] } layout: StackListLayout { headerMode: ListHeaderMode.Sticky } listItemComponents: [ ListItemComponent { type: "header" Header { title: ListItemData.TITLE } }, ListItemComponent { type: "item" Container { id: itemRootBss background: ListItem.selected ? Color.Transparent : Color.Transparent Container { leftPadding: 30 topPadding: 10 rightPadding: 10 bottomPadding: 10 layout: StackLayout { orientation: LayoutOrientation.LeftToRight } Container { layout: StackLayout { orientation: LayoutOrientation.TopToBottom } layoutProperties: StackLayoutProperties { spaceQuota: 1 } Label { text: ListItemData.TITLE textStyle.base: SystemDefaults.TextStyles.TitleText textStyle.color: Color.create("#52c1b1") } Label { text: ListItemData.AUTHOR textStyle.base: SystemDefaults.TextStyles.SubtitleText textStyle.color: Color.create("#7bc92d") } } Container { verticalAlignment: VerticalAlignment.Center horizontalAlignment: HorizontalAlignment.Right layout: StackLayout { orientation: LayoutOrientation.LeftToRight } ImageView { imageSource: "asset:///images/ic_right_arrow.png" } } } Container { background: Color.create("#ffE0E0E0") preferredHeight: 1 Divider { maxHeight: 1 minHeight: 1 } } } } ] onTriggered: { } } } }I nthg prinited title of the header. If I use listitemdata, I don't have the first letter.
in this case, you can call a function of your ListView.
If this is your component header named headerRoot
ListItemComponent { type: "header" CustomListItem { id: headerRoot dividerVisible: true highlightAppearance: HighlightAppearance.None TrackedListHeaderContainer { } } }then inside the component you canreference a function of your ListView in this way:
headerRoot.ListItem.view.dayOfWeek(ListItemData)
Your ListView
onTriggered: { // } function dayOfWeek(headerData) { return app.weekdayLocalized(headerData) }hope that gives you some ideas
Maybe you are looking for
-
Can I move pictures from one album to another within the Photos app?
Organize photos
-
Hello world Here's the scenario: Shared folder of the server became unreachable. Try to access via UNC (name or IP), but failed. Server is pings and accessible via RDP. Server service is started. I can telnet port 445. The Windows Firewall is disable
-
Display data in real time on a field in a sub VI and VI main
-
How to use the Go buyback program?
There is a program that restores your computer exactly what he had on it a while ago. I've used it before, but I don't remember how I got him. Can someone tell me the name of the program if it has changed, or how to access it?
-
include the example file in app
Hello in my app on the homepage, there is a button that opens a sample file to show the user that the application presents the data in a file. But where do I put this file that is installed on all devices. "Working with the file system" I've read tha