The navigation tutorial Beat Bayside bar - helps change

I worked through the excellent tutorial to beat Bayside and Web site construction completed.

As I am new to Dreamweaver CC, I wanted to follow the tutorial to help prepare me for the design and construction of a site myself.

I would like to change the navigation bar to display in black with white instead of white text and black text when the size of the screen is at least 700px and 900px wide.

I tried to edit the css code to try and achieve this, but seem to be fails miserably!

Someone would be kind enough to help me please?

Thanks in advance.

Find the @media (min-width: 700px) query in the file responsive.css and change the 2 selectors css as shown below:

{#navlinks}

Max-width: 1000px;

position: static;

background-color: #000000;

overflow: hidden;

}

#navlinks a {}

Width: 20%;

padding-top: 15px;

padding-bottom: 15px;

margin-bottom: 0px;

float: left;

color: #fff;

}

Tags: Dreamweaver

Similar Questions

  • Where is the video tutorial Beat Bayside

    Where is the video tutorial Beat Bayside

    I don't think that beat BaySide was never presented as a video tutorial.  It is written.

    Your site files and the Setup project. Adobe Dreamweaver CC tutorials

    Nancy O.

  • Navigation tutorial beaten Bayside links not working not

    This tutorial and all the files it are here: How to make a site Web Part 7, use media queries and attach a style sheet. Adobe Dreamweaver tutorials CC

    I noticed that, after that I added the media queries and made a layout with two columns the a href links stopped working in the navigation bar on my index page. They continue to work on other sites page. This is confusing, since two pages use the same style sheet and have the DOM with the same tags.

    To make sure it wasn't a mistake with my code, I opened the file provided with the tutorial, and it had the same problem.

    This only happens when the page hits a query rule of media that hides the menu slide and floating next to the other navigation links. In the slide menu all the links work. The strange thing is that when I click the < nav > element in the DOM tree, the tag is not lit in live view, it's as if this isn't on the page at all.

    I don't know how David has implemented its css (each has their own particular workflow), but a possible workaround is to add overflow: hidden; the css selector #navlinks in media 700px query:

    @media (min-width: 700px) {}

    {#menulink}

    display: none;

    }

    {#navlinks}

    Max-width: 1000px;

    position: static;

    background-color: transparent;

    overflow: hidden;

    }

    Then set the top: 90px 40px in the p #hero selector:

    #hero p {}

    Width: 36%;

    padding-left: 25px;

    padding-right: 25px;

    padding-top: 20px;

    position: absolute;

    color: white;

    border width: 5px;

    border-style: solid;

    top: 40px;

    right: 33px;

    }

    Another solution would be to add clear: both; for the #hero css selector in the in the media of 700px query (did the same thing as above but less code):

    {#hero}

    position: relative;

    Clear: both;

    }

    To see why this add a background color for the #hero css selector in 700px media query. The container of Heroes is on the net asset value for her blocking links.

    {#hero}

    position: relative;

    background-color: red;

    }

  • Can I add a value of textfeild for the navigation bar entry list label?

    Hello

    I want to show the user name in the navigation in apex5 bar. Here I used a pl/sql code to get the user name of LDAP, authentication and pass it to a textfeild when connect you to the application. HERE pass the user name in the text field correctly. All I want is I want to show the value of text field in the navigation bar (the components shared-> details-> entry of the list concerned list) so, what is the syntax to add the value of the entry list Labeltext field? : P101_USER did not work. Please help me on this.

    ThiliBu wrote:

    Thank you very much for the reply.

    I do not use APEX_USER because it takes the name of the connected user. (as first name + name - string DN. But I really want to take FirstName LastName - String CN) I can get this string value CN to a text field but do not know the way to pass that on the navigation bar entry of the list value.

    Then you can explain a little more. I used & P101_USER. for the navigation-> label list entry bar. But it did not show anything on the navigation bar. Can I use custom for this substitution string. If yes how can I do this.

    For security reasons Login page elements are automatically empty, so P101_USER will contain no value when authentication is complete. Rather than use a Login page element, create a point application called USER_NAME and store the string CN value in that. It can be referenced in the entry of the Navigation bar using the syntax of static text substitution:&USER_NAME.

  • How to change the color of the navigation bar based on other

    I need to change the color of my navigation bar, on my page. I already did on my other three pages. With the help of http://work.smarchal.com/twbscolor/scss/9b59b68e44adecf0f1ecdbff0 , but now I have made a new page I don't know how to change the color of the navigation bar to match exactly the three other pages. Please help.

    Bootstrap CSS is read-only and should never be changed.

    Creating CSS code on each web page is redundant & can cause inconsistent styles.  Use rather a stylesheet external called custom.css including all your HTML files are linked. In this way, when you make changes to your custom.css file, these styles will automatically apply to all pages of the site.

    Both inside theTag under the Bootstrap CSS code, add a link to your custom.css file.

    Nancy O.

  • CSS - do not know what to change to begin first of all for the smallest device (border in the navigation bar collapsed)

    I am starting with the smallest device (iPhone, 320 pixels wide) and have implemented the skeleton page. I added a tag to the class to change the background of the original black to Tan, but cannot find a way to cross the border in the white navigation bar icon. I thought that my class label would substitute, but does not appear. Also, is there a setting that I should look for in the bootstrap.css (read-only) which can be adjusted to display the navigation elements rather than collapsed in about 320-768 pixels button icon? Any help would be appreciated.

    John

    <! DOCTYPE html >

    < html lang = "en" >

    < head >

    < meta charset = "UTF-8" >

    < meta http-equiv = "X-UA-Compatible" content = "IE = edge" >

    < meta name = "viewport" content = "width = device-width, original scale = 1" >

    < title > Untitled Document < /title >

    <!-"bootstrap"->

    < link href = "css/bootstrap.css" rel = "stylesheet" > "

    < link href = "css/phone.css" rel = "stylesheet" type = "text/css" > "

    <! - HTML5 shim and Respond.js for IE8 take in charge of the HTML5 elements and questions from the media - >

    <!-WARNING: Respond.js does not work if you view the page via file://-->

    <!-[if lt IE 9] >

    " < script src =" https://OSS.MaxCDN.com/html5shiv/3.7.2/html5shiv.min.js "> < / script > .

    " < script src =" https://OSS.MaxCDN.com/respond/1.4.2/respond.min.js "> < / script > .

    <! [endif]-->

    < / head >

    < body >

    < div class = "container-fluid" >

    <! - start the header image - >

    < div class = "row" >

    < div class = "col-xs-12" style = "" background-color: #ABF0A7; "> < / div >"

    < / div >

    <! - end header image - >

    <! - start navigation - >

    < nav class = "navbar, navbar-reverse rennavbkgrd" > ""

    < div class = "container-fluid" >

    < div class = "bar navigation-header" >

    < button type = "button" class = 'bar of navigation-toggle' toggle data = 'collapse' data-target = "#myNavbar" >

    < span class = 'bar icons' > < / span >

    < span class = 'bar icons' > < / span >

    < span class = 'bar icons' > < / span >

    < / button >

    < / div >

    < div class = "navbar-collapse collapse" id = "myNavbar" >

    < ul class = "navbar-nav nav" >

    < class li = "active" > < a href = "#" > about us < /a > < /li >

    < li > < a href = "#" > < /a > < /li > team members

    < li > < a href = "#" > Subscriber packages < /a > < /li >

    < li > < a href = "#" > insurers < /a > < /li >

    < li > < a href = "#" > Photos < /a > < /li >

    < li > < a href = "#" > contact us < /a > < /li >

    < /ul >

    < / div >

    < / div >

    < / nav >

    <!--end of navigation-->

    < div class = "container-fluid" >

    < h1 > Just a few of us < / h1 > <! - subtitle of the page - >

    <! - start the main text area - >

    < div class = "row" >

    < div class = "col-xs-12" style = "" background-color: Lavender; "> < p > welcome to the Renegades." duis dapibus molestie nisi egestas Magna non semper. ID justo nam posuere duis laoreet auctor fames. Volutpat placerat ut suspendisse imperdiet porttitor felis dui donec pulvinar sollicitudin sollicitudin so tempor. Massa feugiat quam viverra nunc enim libero torquent torquent mus nec lectus is turpis.

    < /p > < / div >

    < div class = "col-xs-6" style = "" background-color: #F39393; "> < p team photo > < /p > < / div >"

    < div class = "col-xs-6" style = "" background-color: #B3EBB7; "> < p >"

    Penatibus ante, MPCs fames morbi egestas duis dapibus molestie nisi Magna non semper lorem. ID justo nam posuere duis laoreet auctor fames. Volutpat placerat ut suspendisse imperdiet porttitor felis dui donec pulvinar sollicitudin sollicitudin so tempor. Massa feugiat quam viverra nunc enim libero torquent torquent mus nec lectus is turpis.

    < /p > < / div >

    < div class = "col-xs-12" style = "" background-color: lavenderblush; "> < p > third text < /p > < / div >"

    < / div >

    < / div >

    <! - end of main text area - >

    < / div >

    <! - start the footer - >

    < style footer = "" background-color: #F2DA3E; "> < p > copyright & copy;" Renegades 1999 team kitchen. All rights reserved. < /p > < / footer >

    <! - end of footer - >

    <! - jQuery (necessary to Bootstrap JavaScript plugins) - >

    "< script src="js/jquery-1.11.2.min.js "> < / script >

    <! - include all the plugins compiled (see below), or include individual files to the need - >

    < script src = "js/bootstrap.js" > < / script >

    < / body >

    < / html >

    Use navbar-default (light) instead of - reverse (dark).

    And you can target the Bootstrap selectors in your custom CSS code.  No additional required courses.

    .NavBar.NavBar - default {background-color: #D2B48C ;}}

    Nancy O.

  • I have 5 html pages that share a common header, footer and sidebar. How to use my navigation bar to change the content of the body without duplicating a lot of code?

    I have 5 html pages that share a common header, footer and sidebar. How to use my navigation bar to change the content of the body without duplicating a lot of code? Thank you!

    Read the help section of DW on models.

    Using Dreamweaver | Creating a Dreamweaver template

    Or use Server-Side Includes

    Nancy O.

  • How can I change the background color for the bar 'help file edit view history bookmark tools' in Firefox 29,0

    How can I change the background color for the bar 'help file edit view history bookmark tools' in Firefox 29,0

    You can add a theme of solid color to change the color of the top of the browser window, which contains the Menu bar.

    https://addons.Mozilla.org/en-us/Firefox/themes/solid

  • How to change the icons size in the Navigation bar

    Is there a simple setting to increase the size of the icons in the Navigation bar? Changing profiles and such is a bit beyond me.

    Thanks for your comments, the-edmeister, that's exactly what I needed! Thank you very much.

  • Lost the back, front, refresh etc. buttons on the navigation bar. Everything on the fact help page and nothing works

    I have the navigation bar checked, restore the default toolbar, reset firefox, restarted with Add ons disabled, restarted the computer, restart firefox and update my plugins. Firefox is also updated. Nothing works. Thank you for your help and care.

    When you open the toolbar customization panel, the Stop/Reload point at the end of the address bar will be "magically" turn into buttons that can be dragged around. If you put them next to each other, they will be combined into a single button, but if you want them separate, I think you can, but a separation between them.

  • Compacts of Firefox window - how to change the navigation bar and tab strip on top, while the bar menu permanently active combined with naviagion bar

    To understand better, I'll show pictures:

    1) change these bars

    2) change navigation bar

    • Navigation bar is in the menu bar because menus cannot be moved

    3) and it should look like this

    • Is this possible?

    Solution would be moving to the right of the orange mozilla icon menu bar and less it would be a band to tabs, but I don't know how!

    P.s. OK, I got that by just release menu bar and clicking on the tabs on the top, but the bar menu shows only when you press Alt - how to freeze the Alt function?

    Exactly what you're trying to do is not possible yet, but the developers are working on it. This - https://addons.mozilla.org/en-US/firefox/addon/personal-titlebar/ - extension will get close to that which you shown in the screenshot of your 3rd.

  • Presets are not active, IE when I roll the cursor over them, nothing changes in the navigation panel, and when I click on one, nothing changes. Can anyone help. Thank you.

    Hello

    I installed LR CC last week and I'm working through the tutorials. My Presets are not active. When I roll over the presets with the cursor, nothing changes in the navigation panel. If I click on one, nothing happening either. Can anyone help?

    Try to uncheck the option preferences > performance > CPU graph use.  There is an obscure bug that causes presets do not display correctly.  Not sure if it will affect, but it is easy to try.

    If this does not help, try to reset the preference of LR: reset the lightroom - updated - Lightroom Forums preferences file.  LR soils is not uncommon of preferences, and when that happens, their reset may fix a surprising number of behaviors wobbly.

  • I have 6 buttons on the navigation bar that point to 6 different pages - the buttons are all the same color - if I am currently on [say] page 3-How can I me key menu 3 to change color and state that I am on page 3?

    I have 6 buttons on the navigation bar that point to 6 different pages - the buttons are all the same color - if I am currently on [say] page 3-How can I me key menu 3 to change color and state that I am on page 3?   using DreamWeaver CC

    Among the contributors here has a nice page explaining how to do what you want, using css.

    Indicator of persisting in the Menus - Page http://alt-web.com/

  • change the navigation plugin Adobe Reader on Mavericks 10.9.5 bar

    I installed the latest version of Acrobat Reader on my Mavericks 10.9.5.

    I use the safari browser with adobe reader plug in reading PDF document in web viewer.

    A few months ago, I noticed that the navigation bar / toolbar is different from that used to be on Adobe Reader in safari.

    In the original navigation bar, he had more options.

    Screen Shot 2014-11-05 at 21.10.05.png

    How can I change the default navigation bar to look like this?

    Screen Shot 2014-11-05 at 21.19.16.png

    You must go to Safari > Preferences > Security > settings to manage the Web Site.

    Select Adobe Reader

    NEC always allow all web sites.

  • How can I change the background image for a single tab on the navigation bar

    I create a film site for LEVEL and for the navigation bar, I intend to have a different character for each tab. However, I can't put one image of each separate tab. Instead, a single image appears on each of the tabs. Here is an example of the CSS source.

    < td width = "200" > < ul id = "navigation" > < br / >

    "< li > < a href ="... / pages/index.html "> home < /a > < /li > < br / >"

    "< li > < a href ="... / pages/cast.html "> Cast < /a > < /li > < br / >"

    "< li > < a href ="... / pages/pictures.html "> photos < /a > < /li > < br / >"

    "< li > < a href ="... / pages/soundtrack.html "> music < /a > < /li > < br / >"

    "< li > < a href ="... / pages/interview.html "> Interviews < /a > < /li > < br / >"

    "< li > < a href ="... / pages/links.html "> links < /a > < /li > < br / >"

    < /ul >

    < table >

    #navigation {}

    list-style-type: none;

    padding: 0px;

    margin: 0px;

    }

    #navigation li {}

    margin: 0px;

    padding: 0px;

    list-style-type: no

    }

    #navigation li a: link, #navigation li a: visited {}

    display: block;

    Width: 200px;

    height: 100px;

    text-decoration: none;

    text-align: center;

    line-height: 100px;

    do-family: "Trebuchet MS", Arial, Helvetica, sans-serif;

    make-weight: bold;

    -webkit-transition: 1000ms relieve;

    -moz-transition: 1000ms relieve;

    -ms-transition: 1000ms relieve;

    -o - transition: 1000ms relieve;

    transition: 1000ms relieve;

    color: #648AAE;

    background-repeat: no-repeat;

    background-image: url (.. / Images/gifs/Batman-still-2.gif);

    background-position: center bottom;

    text-transform: uppercase;

    letter-spacing: 0.79em;

    border-radius: 5px;

    }

    #navigation li a: focus, #navigation li a: hover, #navigation li a: active {}

    Color: #000000;

    background-image: url (.. / Images/gifs/Batman-animation-2.gif);

    background-repeat: no-repeat;

    background-position: center bottom;

    background-color: #454545;

    border-radius: 25px;

    }

    So, how can I put one image on each of the tabs (home, cast, photos, etc.). Thanks in advance for your help.

    Assign a class to the element, and use CSS to apply an image as in

  • class = 'home'; > Home

  • Cast

  • Photos

  • Music

  • Interviews

  • Links

  • and the CSS

    #navigation li a: link. Home, #navigation li a: visited. Home {}

    background-image: url (.. / Images/gifs/Batman-still-2.gif);

    }

Maybe you are looking for

  • Why my phone screen randomly with lights to touch me.

    Why my phone screen randomly turns without touching myself.

  • Always downloaded files like "attachment.ashx" instead of the file name and file type they actually are.

    Since I installed the new version of Firefox (version 8.0), I download each file is downloaded as "attachment.ashx" and will not open. I need to change the name and the type of file to open the document. This happens regardless of whether I download

  • DV7 6c64nr

    Bought a usedHP Pavilion dv7 6c64nr. I had to install everything from scratch. Look for the link to the graphics drivers for Windows 7 (64 bit) 6c64nr dv 7. p.s When I looked for it on the Web site, it would only give me a link to the AMD graphics dr

  • problem with remote access to NMH405

    Hello I have the NMH405 connected to my PC (windows7 and windows xp with IE and Firefox). I was able to connect to the platform of media locally and also via a remote access through ciscomediahub.com. However, remote access Island suddenly no longer

  • With regard to the ports of USB v3.0

    Whne I connect dongal HSDPA USB v3.0 port, while I'm working all of a sudden the laptop is blocked then the keys do not work. Only way is press the power button to turn off the laptop. my laptop is 6051EA DV6 and operating system is win 7 Home Premiu