# Header styles ## Logo above menu This style places the brand logo in the middle and navigation below. The design allows for a longer navigation as the entire header space is available to the navigation menu. Social icons are also placed at the top left. Account, search and cart are placed on the right side: ![Icon style: Text](/files/MKFdq7oRMJ0B5jjvdBH2) #### Icons Broadcast includes several icon options with varying styles coupled by sizes. These examples demonstrate the account, search and cart icons using different combinations: **Clean** icon style uses softer notes and a classic basket for the cart icon: ![Icon style: Clean](/files/xybl8d9GBglUAoVSdaFC) **Modern** icon style brings some darker elements to the icons and a different cart style: ![Icon style: Modern](/files/1vwtXrRGLqLLQl7Ppr28) **Bold** icon style is an even darker with solid elements: ![Icon style: Bold](/files/pVdWMcrk0dzLAEr1HBZG) Social icons are optional and are based on the links you choose to setup in the Theme settings -> Social media. \ \ **Large** icons can be used with all icon styles: ![Icon style: Clean](/files/wGOYBFTqUFiMDPV2s9r8) ![Icon style: Modern](/files/suouxEt9QuHTUF05r392) ![Icon style: Bold](/files/gdm8PRK9CSd8FlIBG6UN) ## Logo beside menu This style places the brand logo to the left with the navigation in the center. The design is a more compressed header area. Ideal for smaller/shorter navigation menus: ![Icon style: Text](/files/ErtlaXcNlpJlaOant07o) #### Icons Examples of icons when used with Logo beside menu style and sized **Small**: ![Icon style: Clean](/files/f4PxmqzQiqBcFfzMlif4) ![Icon style: Modern](/files/ORXuTrK8Dz89MJVdSVnf) ![Icon style: Bold](/files/wStdrWHN9MUcDLGdiRp9) Setting the icon size is set to **Large** can be helpful to balance whitespace and draw attention to the icons: ![Icon style: Clean](/files/pmbNP0GwM0Ffa5YPWscR) ![Icon style: Modern](/files/q6CcDBuSaM9HDUENr3NA) ![Icon style: Bold](/files/oSslB87yea8RXQmyLzpy) Experiment with different icon styles and sizes to find the right look to match your brand. ## Mobile drawer menu This minimal style adopts the mobile design pattern which is used on all mobile devices. This style is the cleanest option, hiding the navigation into a mobile style drawer and keeps consistency between mobile and desktop: ![Icon style: Text](/files/1Ru4dyASvTub2ekgM4Cv) When the menu text or icon is clicked, the slide-out mobile drawer is displayed on both desktop and mobile: ![](/files/P45hKpTRHEQExTw95zai) #### Icons This design with icons uses the commonly recognized hamburger style icon to represent the menu. Example icons set to **Small**: ![Icon style: Clean](/files/Ivalbbmtd9U3xP4frleh) ![Icon style: Modern](/files/FLi476NsBt5NZuynl0C9) ![Icon style: Bold](/files/1kEO5JCfktE2QG8Qrdqs) Icon size set to **Large**: ![Icon style: Clean](/files/tkKx9qqx6ZndTYB6X7MN) ![Icon style: Modern](/files/Caxuq8RE7PcmrbeZ9lLB) ![Icon style: Bold](/files/nr6y1YFema2WkWwu1X8W) The search icon is placed next to the mobile style hamburger icon for balance. Account and cart icons are on the far right. ### Search icon toggle The search icon can be hidden or shown by using the toggle checkbox: ![Icon style: Modern](/files/T3Q0mbgQ0ZKDTcy14VT3) ## Logo center menu left This compressed design brings the brand logo to the middle and places the navigation menu to the left. Ideal for smaller/shorter navigations and keeping with a smaller header area: ![Icon style: Text](/files/eZ6fOTX5Nc8o6W1uLgpA) #### Icons Icon size set to: **Small**: ![Icon style: Clean](/files/Q22ua9iVb0ZwQ1cHZXK4) ![Icon style: Modern](/files/zIw1MNf2xMloBJhcCy2Y) ![Icon style: Bold](/files/y5KSYeeliah5cj7VijCh) Icon size set to: **Large**: ![Icon style: Clean](/files/rBhOOIOnCxOldUL1Hflt) ![Icon style: Modern](/files/N2VLJXdEGPRIZC22G6Lt) ![Icon style: Bold](/files/Cqc4jV5Tv7cmKlLdUlLC) ## Transparent header When using a transparent header, you can experiment with different icon styles to help the icons standout with your background image. A large icon size sometimes helps to bring attention to the icons: ![Icon style: Modern](/files/sMD3QJ3lkDQXeoNCMuS3) Find the transparent header options lower in the Header section settings: ![Icon style: Bold](/files/KceCvItWzeSFHDQz2u2u) --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://broadcast.presidiocreative.com/broadcast-v3/header/header-styles.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.